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

Question

我有一个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将新创建的设计放在新窗口上，就像预览设计一样。

所以我的问题是：

1. 我可以转换此div并将其直接保存为图像吗？
2. 我想将它导出到画布，以便我可以将其保存为图像。 如何将其导出到画布？
3. 还有其他方法吗？

Answer 1

我会回答你把你所拥有的东西移植到画布上的问题。 我在这里写了一篇文章。

你所做的是阅读图像及其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, x, y);
  };
  img.src = src;
}

Answer 2

您可以使用方法drawImage()从画布上的div中绘制图像，之后您可以使用toDataURL()方法获得生成的base64编码图像。

Answer 3

我会使用php的GD库来创建新图像。 您可以使用div的内联样式来确定新图像所需的位置。 你需要花一些时间来阅读我首先链接的GD文档，如果你之前没有使用过GD，它可能会有点混乱，但是在php中处理图像时它可以提供很大的灵活性。