Estoy dibujando una serie de imágenes en un lienzo y pasando la imagen del lienzo a una carpeta zip con JsZip. Los nombres de archivo de la serie de imágenes se representan en la matriz drawOrder.

Dado que las imágenes tardan en cargarse, drawImage() se realiza con una Promesa. La imagen se carga correctamente en el lienzo, pero el zip generado regresa como un archivo zip vacío.

Sospecho que esto se debe a que toBlob y Promise son funciones asíncronas. Mi comprensión de las funciones asincrónicas es un poco débil, espero que alguien pueda explicar por qué no funciona y orientarme en la dirección correcta.

 //THE PROMISE function promiseAll(order){ return Promise.all( order.map(function (t) { return new Promise(function (resolve) { var img = new Image(); img.src = "http://foo/" + t + ".png"; img.onload = function () { resolve(img); }; }); }) ); }; function toCanvas() { var drawOrder = ["base1", "base2", "object1", "foreground1"]; var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); //Use Preloader promiseAll(drawOrder).then(function (allImages){ console.log("Layers loaded", allImages); for (let k = 0; k < drawOrder.length; k++) { ctx.drawImage(allImages[k], 0, 0, canvas.width, canvas.height) }; canvas.toBlob(function(blob) { zip.file("hello.png", blob); }; }); }; zip.generateAsync({type:"base64"}).then(function (base64) { location.href="data:application/zip;base64," + base64; });