如何使用javascript / jquery将3个canvas HTML元素合并为1个图像文件？ [英] How to combine 3 canvas HTML elements into 1 image file using javascript/jquery?

问题描述

我有3 canvas，如canvasTarget，canvasTarget2，canvasTarget3如下所示：

I have 3 canvas i.e. canvasTarget, canvasTarget2, canvasTarget3 as shown below:

        var canvas = document.getElementById("canvasTarget");
        var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        var canvas2 = document.getElementById("canvasTarget2");
        var img2 = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream");
        var canvas3 = document.getElementById("canvasTarget3");
        var img3 = canvas3.toDataURL("image/png").replace("image/png", "image/octet-stream");

我想将这些画布元素合并成一个，并下载为JPEG或PDF文件。
我使用/html2canvas.js下载这个。
任何即时回复将被感激。

I want to combine these canvas elements into one and download as JPEG or PDF file. I am using /html2canvas.js for downloading this. Any immediate response will be appreciated.

推荐答案

所以你已经渲染了你的画布，想要结合它们 - 叠加，并排？在这两种情况下，您都可以使用 Canvas.context.drawImage（）将它们添加到新的画布对象，然后使用 Canvas.toDataURL

So you've rendered your canvases, but it's not clear how you want to combine them - overlaid, side-by-side? In either case you can use Canvas.context.drawImage() to add them to a new canvas object, and then use the Canvas.toDataURL() method to return the, erm, dataURL of the new canvas.

/* assumes each canvas has the same dimensions */
var overlayCanvases = function(cnv1, cnv2, cnv3) {
    var newCanvas = document.createElement('canvas'),
        ctx = newCanvas.getContext('2d'),
        width = cnv1.width,
        height = cnv1.height;

    newCanvas.width = width;
    newCanvas.height = height;

    [cnv1, cnv2, cnv3].forEach(function(n) {
        ctx.beginPath();
        ctx.drawImage(n, 0, 0, width, height);
    });

    return newCanvas.toDataURL();
};

/* assumes each canvas has the same width */
var verticalCanvases = function(cnv1, cnv2, cnv3) {
    var newCanvas = document.createElement('canvas'),
        ctx = newCanvas.getContext('2d'),
        width = cnv1.width,
        height = cnv1.height + cnv2.height + cnv3.height;

    newCanvas.width = width;
    newCanvas.height = height;

    [{
        cnv: cnv1,
        y: 0
    },
    {
        cnv: cnv2,
        y: cnv1.height
    },
    {
        cnv: cnv3,
        y: cnv1.height + cnv2.height
    }].forEach(function(n) {
        ctx.beginPath();
        ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
    });

    return newCanvas.toDataURL();
};

/* USAGE */
var dURL1 = overlayCanvases(canvas1,canvas2,canvas3);
var dURL2 = verticalCanvases(canvas1,canvas2,canvas3);

overlayCanvases（）画布彼此叠加，因此参数的顺序很重要。 verticalCanvases（）将垂直和按降序排列画布。这里要注意的重要事情是 Canvas.context.drawImage（）允许你将一个画布绘制到另一个画布上 - 相对定位可以根据您的目的进行微调。

The overlayCanvases() function will place the canvases on top of each other, so the order of the arguments is important. The verticalCanvases() will align the canvas vertically and in descending order. The important thing to notice here is that Canvas.context.drawImage() allows you to paint one canvas into another - relative positioning can be jiggled to suit your purposes.

功能Fiddled： https://jsfiddle.net/BnPck/ cyLrmpjy /

Functions above Fiddled : https://jsfiddle.net/BnPck/cyLrmpjy/

这篇关于如何使用javascript / jquery将3个canvas HTML元素合并为1个图像文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！