将div转换为图像的最佳方法?使用php，javascript或jquery [英] best way to convert a div to image? using either php, javascript or jquery

问题描述

我有一个包含如下图像的div:

I have a div containing images like so:

<div id="Created_Design">
  <img src="images/image1.png" style="position: absolute; left: 8px; top: 172px;">
  <img src="images/image2.png" style="position: absolute; left: 20px; top: 144px">
</div>

我想将这个div导出为图像，原因是我创建了诸如设计生成器之类的东西.到目前为止，我所做的就是使用window.open将新创建的设计放在新窗口中，就像设计的预览一样.

I want to export this div to be an image cause im creating something like a design generator. So far what i have done is place the newly created design on new window using window.open like a preview of the design.

所以我的问题是:

1. 我可以转换此div并将其直接另存为图像吗?
2. 我当时正在考虑将其导出到画布上，以便将其另存为图像.如何将其导出到画布?
3. 还有其他方法吗?

推荐答案

我将回答有关将必需的内容移植到画布的问题.我在此处写了一篇帖子.

I'll answer your question of porting what you have to a canvas. I wrote a post here.

您要做的是读取图像及其顶部和左侧的css位置.然后将其复制到画布中.

What you do is read the images and their css position, top and left. Then copy it into the canvas.

(开头的代码，可能是错误的)

(code from head, may be error)

// Loop over images and call the method for each image node
$('#Created_Design').children(function() {
    drawImage(this.src, this.style.left, this.style.top);
});

function drawImage(src, x, y) {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, x, y);
  };
  img.src = src;
}

这篇关于将div转换为图像的最佳方法?使用php，javascript或jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！