将几个画布图像拼接在一起并将它们保存为文件？

Question

我有一堆图片通过 Javascript 上传到一些 Canvas 元素中。 然后我想将它们拼接在一起并将它们保存为新图像。

我已将它们上传并在 Canvas 中获取，但我不知道如何将它们拼接在一起并保存它们。

想法？

Answer 1

参考。 cmets：要使这个答案起作用，您需要使用我的库 easyCanvasJS（可在 GitHub 和 here 上获得）。这是一个免费的图书馆/麻省理工学院许可。

Online demo here

/// create a new instance of easyCanvas using canvas with id "demo"
var ez = new easyCanvas('demo'),

    /// define the image URLs
    urls = ['http://img1.jpg',
            'http://img2.jpg',
            ...etc...
    ];

/// Use the built-in loader to load all the images
ez.loadImages(urls, done);
    
/// draw all images that was loaded
function done(e) {

    var i, t, x = 0, y = 0,
        w = ez.width * 0.333,  /// grid 3x3 assuming 9 images
        h = ez.height * 0.333,
        count = 0;

    /// fill canvas with a grid of the images
    for(i = 0; i < e.images.length; i++) {

        /// if image was successfully loaded image will not be null
        if (e.images[i] !== null) {
            ez.ctx.drawImage(e.images[i], x, y, w, h);
            count++;

            /// move to next spot for next image
            if (((i + 1) % 3) === 0) {
                x = 0;
                y += h;
            } else x += w;
        }
    }
    
}

现在应该已经加载了所有图像，并在单个画布上以 3x3 网格绘制。

要将画布保存为图像，只需使用：

ez.download('filename.png');

在demo我在画布下方添加了一个下载按钮。

如果您想合并进度条，请查看original sample here。