我有一个包含如下图像的 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 并将其直接保存为图像吗?
- 我正在考虑将其导出到 Canvas ,以便将其另存为图像。如何将其导出到 Canvas ?
- 还有其他方法吗?
最佳答案
我将回答您关于将您拥有的内容移植到 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;
}
关于php - 将 div 转换为图像的最佳方法?使用 php、javascript 或 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6825262/