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

所以我的问题是：

我可以转换此div并将其直接保存为图像吗？
我正考虑将其导出到画布，以便将其保存为图像。如何将其导出到画布？
还有其他办法吗？

Answer 1

我会回答你将你拥有的东西移植到画布上的问题。我写了一篇帖子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, x, y);
  };
  img.src = src;
}

Answer 2

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

Answer 3

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

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

3 个答案: