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

Question

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

我上传了它们并在Canvas中获得了它们，但我无法弄清楚如何将它们拼接在一起并保存它们。

想法？

Answer 1

参考。评论：对于这个工作答案，你需要使用我的库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。