• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

363
Vistas
JS 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); });

}); ingrese la descripción de la imagen aquí

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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 here

Consulte esta respuesta para obtener información adicional sobre las promesas en los bucles.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda