如何使用javascript下载从画布生成的所有图像

How Do I download all the images generated from canvas using javascript?

本文关键字：图像 布生成 何使用 javascript 下载      更新时间：2024-04-22

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

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

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

相关文章：