javascript - 如何使用 javascript 下载从 Canvas 生成的所有图像？

Question

我正在 Canvas 上绘制新图，特别是，它通过 canvas.toDataURL() 保存 Canvas 图像。

以下是我用来将图像的 url 保存在数组中的代码:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var images = [];
function foo(){
    /* do my work */;
    images.push(canvas.toDataURL());
    /* clearing canvas to get new image and draw again on canvas */ 
}

现在函数 foo() 将被调用多次，但在某个事件发生后，它将停止，现在我需要下载存储在 images[] 中的所有图像> 通过将所有图像压缩到一个 zip 文件。甚至可以这样做吗？

Answer 1

您可以使用 JSZip 执行此操作图书馆。参见示例:

var zip = new JSZip();
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
var content = zip.generate({type:"blob"});
saveAs(content, "example.zip");

您需要在循环中使用 img.file() 方法来创建多个图像(不要忘记文件的不同名称)。