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

Question

我在画布上制作新图纸，特别是时间，它通过canvas.toDataURL()保存画布的图像。

以下是我用来保存数组中图片网址的代码：

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()将被多次调用，但在事件发生后，它将停止，现在我需要通过将所有图像压缩到zip来下载存储在images[]中的所有图像文件。甚至可以这样做吗？

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()方法来创建多个图像（不要忘记文件的不同名称）。