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

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

我想导出这个div作为图像因为我创建像设计生成器的东西。 到目前为止，我所做的是使用window.open将新创建的设计放在新窗口上，就像预览设计一样。

所以我的问题是：

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

Answer 1

我会回答你把你有什么移植到canvas上的问题。 我在这里写了一篇文章。

你所做的是读取图像及其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; } 

Answer 2

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

Answer 3

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