0
369
VistasJS forEach: procesa los archivos de imágenes en el orden en que se cargan, no al azar
Quiero cargar varias imágenes (diferentes tamaños), comprimir cada imagen y agregarla a un archivo PDF en el orden en que se cargan. Cuando se procesen todas las imágenes cargadas, quiero guardar el archivo PDF
En la imagen adjunta, la lista de archivos está en el orden correcto, pero cuando intento procesarlos, el orden es completamente incorrecto. Comienza con los archivos[13] (el archivo más pequeño), luego genera el pdf y luego procesa el resto de las imágenes.
¿Cuál es la forma correcta de implementar esto y asegurarse de que el PDF se guarde solo después de que todas las imágenes se procesen en el orden correcto? ¡Muchas gracias!
Tengo un archivo de entrada:
<input id="file" type="file" accept="image/*" multiple .....>Y tengo una función para procesar las imágenes:
Array.from(files).forEach(async (file: any, i: number) => { console.log("Index inside forEach: "+i); imageCompression(file, compressOptions).then(function (compressedFile) { let fileUrl = URL.createObjectURL(compressedFile) let fileType = compressedFile.type === "image/png" ? "PNG" : "JPEG"; const pdfWidth = PDF.internal.pageSize.getWidth(); const pdfHeight = PDF.internal.pageSize.getHeight(); PDF.addImage(fileUrl, fileType, 0, 0, pdfWidth, pdfHeight, "alias"+i, 'SLOW'); console.log("Index inside imageCompression: "+ i + " -> " + compressedFile.name); if ( i < files.length - 1) { PDF.addPage('a4'); } if ( i === files.length - 1) { console.log('!!!! GENERATE PDF'); PDF.save('fisa_'+new Date().getTime()+'.pdf'); } }) .catch(function (error) { console.log(error.message); }); }); 
1 Respuestas
Responde la pregunta0
Cambie Array#forEach a Array#map :
const compressions = Array.from(files).map((file) => { return imageCompression(file, compressOptions); }); Promise.all(compressions).then((compressedImages) => { // the ordering of images in `compressedImages` is the same as in `files` // you can do the PDF.addImage(...) and PDF.addPage(...) bits here }); Con la sintaxis moderna async / await esto se ve un poco mejor:
const compressions = Array.from(files).map((file) => { return imageCompression(file, compressOptions); }); const compressedImages = await Promise.all(compressions); // the ordering of images in `compressedImages` is the same as in `files` // you can do the PDF.addImage(...) and PDF.addPage(...) bits hereConsulte esta respuesta para obtener información adicional sobre las promesas en los bucles.