forEach asíncrono para convertir imágenes a base64 con Promise.all

04 Jun, 2023 Programación 0

Estoy usando React. Quiero usar Promise.all. Pero no pude entender cómo hacerlo. Tengo un array imageUrls que tengo que convertir a formato base64, cuando lo hago manualmente está bien, ¿pero cómo puedo usarlo con forEach? ¿O hay alguna otra solución para esto?

Versión manual

const promise1 = new Promise((resolve) => {
    setTimeout(resolve, 1000, 'test');
)}
const promise2 = this.getBase64ImageFromURL("ejemplo de URL de imagen");
const promise3 = this.getBase64ImageFromURL("ejemplo de URL de imagen 2");

Promise.all([promise1, promise2, promise3]).then((res) => {
    console.log(res)
)}

Tengo un conjunto de Urls y tengo que convertirlos a base64, pero forEach no espera ¿cómo puedo implementar esta estructura?

const imageUrls = ["ejemplo de URL de imagen 1", "ejemplo de URL de imagen 2", "ejemplo de URL de imagen 3"];

imageUrls.forEach((url) => {
    this.getBase64ImageFromURL(url);
)}

getBase64ImageFromURL(url) {
    return new Promise((resolve, reject) => {
        var convertedImage = new Image();
        convertedImage.setAttribute('crossOrigin', 'anonymous');
        convertedImage.onload = () => {
            var canvas = document.createElement('canvas');
            canvas.width = convertedImage.width;
            canvas.height = convertedImage.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(convertedImage, 0, 0);
            var dataURL = canvas.toDataURL('image/png');
            resolve(dataURL);
        };
        convertedImage.onerror = error => {
            reject(error);
        };
        convertedImage.src = url;
    });
}

const imageUrls = ["exampleimageurl1", "exampleimageurl2", "exampleimageurl3"]; const promises = imageUrls.map(url => this.getBase64ImageFromURL(url)); Promise.all(promises).then(base64Images => { console.log(base64Images); })

Answer

davy.ai

June 4, 2023 at 6:09 am
Para utilizar Promise.all con el array imageUrls, puedes mapear cada URL a una promesa que resuelve en el formato base64 de la imagen. Esto se puede hacer utilizando el método getBase64ImageFromURL que proporcionaste. Luego, puedes pasar el array resultante de promesas a Promise.all para esperar a que todas se resuelvan antes de continuar con el resto de tu código. Aquí hay un ejemplo:
```
const imageUrls = ["exampleimageurl1", "exampleimageurl2", "exampleimageurl3"];

const promises = imageUrls.map(url => this.getBase64ImageFromURL(url));

Promise.all(promises).then(base64Images => {
  console.log(base64Images);
})
```
En este código, imageUrls es el array de URLs que se convertirán a base64. El método map se utiliza para crear un nuevo array de promesas, con cada promesa resolviéndose en el formato base64 de una imagen. El array resultante de promesas se pasa a Promise.all, que espera a que todas las promesas se resuelvan antes de llamar al callback then con un array de los valores resueltos (en este caso, un array de cadenas base64).

Utilizando este enfoque, Promise.all esperará a que se completen todas las conversiones de imágenes antes de continuar con el resto de tu código.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

forEach asíncrono para convertir imágenes a base64 con Promise.all

Answer

davy.ai