如何使用 javascript/jquery 将 3 canvas HTML 元素组合成 1 个图像文件？

Question

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

        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");

我想将这些 canvas 元素合并为一个并下载为 JPEG 或 PDF 文件。我正在使用 /html2canvas.js 下载它。如有任何即时回复，我们将不胜感激。

Answer 1

所以您已经渲染了 canvases，但不清楚您希望如何组合它们 - 重叠、并排？在任何一种情况下，您都可以使用 Canvas.context.drawImage() 将它们添加到新的 canvas 对象，然后使用 Canvas.toDataURL() 方法 return 新 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() 函数会将 canvas 放在彼此之上，因此参数的顺序很重要。 verticalCanvases() 将按降序垂直对齐 canvas。这里要注意的重要一点是，Canvas.context.drawImage() 允许您将一个 canvas 绘制到另一个 - 可以调整相对定位以适合您的目的。

Fiddled 以上的函数：https://jsfiddle.net/BnPck/cyLrmpjy/

如何使用 javascript/jquery 将 3 canvas HTML 元素组合成 1 个图像文件？

How to combine 3 canvas HTML elements into 1 image file using javascript/jquery?

javascript

jquery

canvas

html5-canvas

html2canvas