使用javascript将具有多个图像的html div转换为单个图像

我正在尝试将DIV转换为单个图像。div中有4个图像。我已经找到了“htmltocanvas”的js，但是这个jquery插件并没有创建包含div中所有图像的图像

下面是div代码，其中包含图像，需要转换为图像

<div id="myJershy">
    <!-- Color 3 -->
    <img src="grey.gif" id="grey" style="position: fixed; top: 8px; left: 12px; width: 935px;">
    <!-- Color 2 -->
    <img class="orange" id="orange" src="orange.gif" style="position: fixed; left: 10px; top: 8px;">
    <!-- Color 4 -->
    <img src="gold.gif" id="gold" style="position: fixed; top: 12px; left: 22px;">
    <!-- Color 1 -->
    <img class="back" id="black" src="back.gif" style="position: fixed; left: 11px; top: 9px;"> 
    <!-- outline -->
    <img class="skel" id="skel" src="outline.gif" style="position: fixed;">
</div>

我也尝试过下面的javascript代码，但没有成功

var htmlcontent = $("#myJershy").html();
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
        htmlcontent+
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
document.getElementById('previewproduct').src = url;

var htmlcontent=$（“#myJershy”）.html（）；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var data=“”+
"" +
"" +
htmlcontent+
"" +
"" +
"";
var DOMURL=self.URL | | self.webkitURL | | self；
var img=新图像（）；
var svg=newblob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
};
document.getElementById（'previewproduct'）。src=url；

请注意“HTMLdiv”有多个图像

jQuery

var s=0;
$('#myJershy').children('img').each(function(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById($(this).attr('id'));
    ctx.drawImage(img,s,10,$(this).width(),$(this).height());
    s=s+$(this).width();
});

---

如果希望画布中div的位置与画布外部显示的位置完全一致，请参见下面的提琴：

以下是我的尝试：

不要担心html中那些庞大的代码，它们只是url编码的图像，如果您的图像托管在您的域中，您不必这样做

导出为jpg的图像是带有红色边框的图像（在结果窗口中滚动）：

var DivsToJPG=函数（父函数）{
this.canvasSizeX=0；
此参数为0.canvasSizeY=0；
this.init=函数（父函数）{
this.images=parent.find（'img'）；
this.setSizes（）；
这个.createCanvas（）；
这个.drawImages（）；
这个.exportJPG（）；
}
this.setSizes=函数（）{
for（var i=0，l=this.images.length；i（posX+宽度）？this.canvasSizeX:posX+宽度；
//console.log（this.canvasSizeX）；
var posY=currentImage.position（）.top；
var height=currentImage.height（）；
this.canvasSizeY=this.canvasSizeY>（posY+height）？this.canvasSizeY:posY+height；
}
}
this.createCanvas=函数（）{
this.canvas=document.createElement（'canvas'）；
this.canvas.id=“exportCanvas”；
this.canvas.width=this.canvasSizeX；
this.canvas.height=this.canvasSizeY；
this.ctx=this.canvas.getContext（“2d”）；
document.body.appendChild（this.canvas）；
}
this.drawImages=函数（）{
for（var i=0，l=this.images.length；i

PS：虽然有点长，但它应该会处理好所有的事情，它使用了一点jQuery

这是我的答案（基于@Zwords awesome answer），它考虑了顶部和左侧的位置。以防您要对这些图像进行分层

$('#myJershy').children('img').each(function(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById($(this).attr('id'));
 ctx.drawImage(img,$(this).css('left').replace('px',''),$(this).css('top').replace('px',''),$(this).width(),$(this).height());
});

---

---

所以基本上你是想把你的图片合并成一张？是的，我需要合并所有的图片。有没有另外一个选项可以用javascript实现？为什么不在Photoshop中实现呢？是的，我们可以用Photoshop实现，但我希望在网页中实现这个功能。这些图像作为一个图像在web上呈现，供您参考。使用所有四个映像形成的映像需要发送到服务器。因此，我需要此功能。@user3270303我将做一个小提琴，但这需要时间。请稍后检查，在画布上绘制图像时，您如何不能解决跨域策略问题？很抱歉，我弄糊涂了，您可以在画布上从另一个域绘制图像，但不能在画布上使用跨域图像调用toDataUrl（）。我的答案中有它，这就是为什么我在控制台中有警告。请注意，我认为这种解决方案可能会在图像低于屏幕大小（如果您必须滚动才能看到它们）时产生问题，因为偏移量（）代码很好，但它不管理div的css。正如您在示例html中看到的，所有图像都使用css排列。在您的代码中，这些css没有被考虑在内。因此，输出图像只是合并了div中存在的所有图像。但是我们需要使用css的代码。@user3270303您检查了我的第二个副手了吗？它正在工作…很棒的代码。只是有一个问题。当从html DIV生成新图像时，输出加倍。我的意思是它复制了两次div。而我们只想要一个。你可以看一下吗？你只需要删除创建最终图像所需的元素：this.container.remove（）；this.canvas.remove（）；请注意，您可能需要更改此行：document.body.appendChild（this.img）；为了满足您的需要，如果您想将最终图像附加到另一个div或其他内容中，如果您决定使用我的答案，您能接受吗？谢谢，这是我的荣幸。这是更新后的代码。但这将提供与我的相同的输出，而不是完全相同的输出。查看问题和我的方法的html部分中的样式定义。我猜他想安装重叠的图像。尽管如此，你的答案是完全正确的，代表应该去找你。我只是用定义的c替换坐标

$('#myJershy').children('img').each(function(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById($(this).attr('id'));
 ctx.drawImage(img,$(this).css('left').replace('px',''),$(this).css('top').replace('px',''),$(this).width(),$(this).height());
});