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

问题描述

我试图将DIV转换为单张图片。 div中有4张图片。我找到了htmltocanvas的js，但这个jquery插件不创建图像与所有的图像存在于div。

I am trying to convert a DIV to single image. The div has 4 images in it. I have found the js for "htmltocanvas" but this jquery plugin does not create image with all images present in the div.

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

Here is the div code which having the images in it and need to be convert into image.

<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代码，但是不能获得成功。

I have also tried with the below javascript code but not able to get the success.

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有多个图片。

Please note "html div" has multiple images.

推荐答案

这是我的尝试：

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

Don't worry about those huge codes in the html, they're just the images url-encoded, you don't have to do it if your images are hosted on your domain.

导出的图片为jpg （在结果窗口中滚动）：

The exported image as jpg is the one with red boarder (scroll around in the result window):

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

PS: it's a bit longer but it should take care of everything, it uses a bit of jQuery

这篇关于使用javascript将具有多个图像的html div转换为单个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！