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

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

这是div代码，其中包含图像并需要转换为图像。

我也试过下面的javascript代码，但无法取得成功。

 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 = 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; 

请注意“html div”有多个图像。

Answer 1

这是我的尝试：

http://jsfiddle.net/8FFQM/1/

不要担心html中的那些巨大的代码，它们只是url编码的图像，如果您的图像托管在您的域中，则不必执行此操作。

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

 var DivsToJPG = function( parent ) { this.canvasSizeX = 0; this.canvasSizeY = 0; this.init = function( parent ) { this.images = parent.find('img'); this.setSizes(); this.createCanvas(); this.drawImages(); this.exportJPG(); } this.setSizes = function() { for (var i = 0, l = this.images.length; i < l ; i++) { var currentImage = this.images.eq(i); var posX = currentImage.position().left; var width = currentImage.width(); this.canvasSizeX = this.canvasSizeX > (posX+width) ? this.canvasSizeX : posX + width; //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 = function() { 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 = function() { for (var i = 0, l = this.images.length; i < l ; i++) { var currentImage = this.images[i]; var $currentImage = this.images.eq(i); this.ctx.drawImage(currentImage, $currentImage.position().left, $currentImage.position().top, $currentImage.width(), $currentImage.height()); } } this.exportJPG = function() { var dataURL = this.canvas.toDataURL(); this.img = document.createElement('img'); this.img.id = "createdImage"; this.img.src = dataURL; document.body.appendChild(this.img); } this.init( parent ); } var divsToJPG = new DivsToJPG($('#myJershy')); 

PS：它有点长，但它应该照顾一切，它使用一点jQuery

Answer 2

看到这个小提琴

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(); }); 

---

如果你想要canvas中div的位置应该完全如canvas外面所示，那么请看下面的小提琴：

小提琴2

Answer 3

这是我的答案（基于@Zwords很棒的答案），它考虑了Top和Left的位置。 如果您想要分层图像。

 $('#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()); }); 

来自@Zword的分叉小提琴