See this fiddle

Question

我正在尝试将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;

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

Answer 1

这是我的尝试：

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

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

导出的图像为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

See this fiddle

的的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的位置应该完全如画布外面所示，那么请看下面的小提琴：

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

Forked Fiddle from @Zword

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

3 个答案:

See this fiddle

Fiddle 2