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

【问题标题】：best way to convert a div to image? using either php, javascript or jquery将 div 转换为图像的最佳方法？使用 php、javascript 或 jquery
【发布时间】：2011-10-13 02:34:04
【问题描述】：

我有一个包含如下图像的 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 并将其直接保存为图像吗？
我正在考虑将其导出到画布上，以便将其保存为图像。如何将其导出到画布？
还有其他方法吗？

【问题讨论】：

标签： php javascript jquery

【解决方案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;
}

【讨论】：

不知道其余的，但您应该将 this.attr('src') 更改为 this.src。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：