Javascript 使用JSZip生成图像的zip时返回空zip

我正在使用JSZip并尝试创建一个图像压缩包（给定图像的URL）。最初我尝试使用base64转换（

canvas.toDataURL

），但这会在zip中生成一些损坏的图像。所以，后来我转向了基于blob的方法。现在我从img创建画布，然后将其转换为blob以压缩它。现在，由于

canvas.toBlob

方法是异步运行的，因此我的end-zip文件返回为空（其中有一个空的images文件夹）。这可能就是我猜测的原因。我可能错了

$("#download-images-small").on("click", function(){
    var links = []
    // get the list of images on page
    var selections = $('.checkbox:checked').parent('label').siblings("img")
    var zip = new JSZip();
    zip.folder("images");
    var img = zip.folder("images");

    for (var i = selections.length - 1; i >= 0; i--) {
        filename = $(selections[i]).attr('title') + "." + $(selections[i]).data('type')
        var canvas = document.createElement("canvas");
        canvas.width = selections[i].width;
        canvas.height = selections[i].height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(selections[i], 0, 0);
        canvas.toBlob(function (blob) {
           zip.file(filename, blob);
        });
    }

    zip.generateAsync({type:"blob"}).then(function(content) {
      saveAs(content, "compressed.zip");
    });
});

---

如果可能，请帮助我找到更好的方法。谢谢。

canvas.toBlob函数包含一个回调，该回调应该需要很长时间，因此当执行

generateAsync

函数时，

toBlob

函数未完成。您必须在周期的

之后使用setTimeout调用
generateAsync
。我已经尝试过了。设置超时时间为5秒。但是在zip中只接收到一张图像，而我的列表是100。请使用
async
和
wait
关键字，因为所有内容都被称为async
canvas。toBlob
函数包含一个回调，该回调应该需要很长时间，因此，当执行
generateAsync
函数时，则
toBlob
函数未完成。您必须在

周期的

之后使用setTimeout调用
generateAsync
。我已经尝试过了。设置超时时间为5秒。但是在zip中只收到一张图像，而我的列表是100。请使用
async
和
wait
关键字，因为所有内容都称为async