php - 将 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. 我正在考虑将其导出到 Canvas ，以便将其另存为图像。如何将其导出到 Canvas ？
3. 还有其他方法吗？

Answer 1

我将回答您关于将您拥有的内容移植到 Canvas 的问题。我写了一篇文章here .

您所做的是读取图像及其 css 位置、顶部和左侧。然后将其复制到 Canvas 中。

(头部代码，可能有误)

// 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;
}