将div转换成图像的最佳方法？使用php,javascript或jquery

我有一个div包含像这样的图像：

<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像预览设计.

所以我的问题是：

>我可以转换这个div并直接保存为图像吗？
>我正在考虑将其导出到画布上,以便将其保存为图像.如何将其导出到画布？
>还有其他办法吗？

解决方法

我会回答你的问题,移植你的画布.我写了一篇文章 here.

你做的是读取图像和它们的CSS位置,左上和左.然后将其复制到画布中.

(代码从头,可能是错误)

// 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,y);
  };
  img.src = src;
}