javascript - 将多个 Canvas 转换为 html5 中的 dataURL

Question

我想加入多个 Canvas 来制作单个图像。那么有什么方法可以将多个 Canvas 转换为 toDataURL 来制作单个图像吗？

Answer 1

创建一个接受多个参数( Canvas 元素)的函数，将它们放在一个空白 Canvas 上，然后返回新 Canvas 的数据 URL。

var getImadeData = function () {
    var i = arguments.length,
        tempCanvas = document.createElement("canvas"),
        ctx = tempCanvas.getContext("2d");
     while (i--) {
        ctx.drawImage(arguments[i], 0, 0);
    };
    return tempCanvas.toDataURL();
};

现在只需将要放入一个 dataurl 中的多个 Canvas 元素提供给函数即可。

var newData = getImageData(canvas1, canvas2, canvas3);

在此示例中，最后一个 Canvas 首先放置在空白 Canvas 上，因此请确保对 Canvas 元素进行适当排序。