我有一个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并直接保存为图像吗？
>我正在考虑将其导出到画布上,以便将其保存为图像.如何将其导出到画布？
>还有其他办法吗？
解决方法
我会回答你的问题,移植你的画布.我写了一篇文章
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,y);
};
img.src = src;
}
