Tengo algo que busqué mucho sobre la solución pero no encuentro nada. También probé muchas cosas, pero tampoco funcionó nada conmigo. Espero encontrar algo aquí.

Construyo un sitio web, en algunas etapas permito al usuario convertir sus imágenes de cualquier tipo a WEBP. Así que hice la función de constructor para hacer este proceso:

 async function loadImage(url) { return await new Promise((resolve, reject) => { let img = new Image(); img.addEventListener('load', e => resolve(img)); img.addEventListener('error', () => { reject(new Error(`Failed to load image's URL: ${url}`)); }); img.src = url; }); } async function convert(image, options) { let newImage = new Image(); let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); return await new Promise((resolve) => { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, image.width, image.height); // convert canvas to webp image newImage.src = canvas.toDataURL(`image/${options.to}`, 1); resolve(newImage) }); } async function Converter(userImage, options) { let src = URL.createObjectURL(userImage); let image = new Image(); image.src = src; image.style.width = "auto"; image.style.height = "auto"; let t; await loadImage(src).then(img => { return convert(img, options) }).then(newImage => { t = newImage; }) return t; } export default Converter;

Le permito cargar las imágenes y convertirlas con Javascript sin subir las imágenes al servidor.

Estoy usando esta función en otro archivo js como este:

 formInputs.addEventListener('change', e => { if (formInputs.files.length > 0) { updateFilatorTable(filatorInput.files); } })

Como puede ver, estoy usando promesas y asíncrono/espera, para esperar que las imágenes se carguen y conviertan. pero el problema también aquí en espera. ¿Cómo puedo mostrar la barra de progreso del usuario cuando se carga la imagen y luego mostrar otra barra de progreso cuando la imagen se convierte, con un porcentaje real, por ejemplo: 25% de conversión?

Todo funciona bien, pero el problema es cómo mostrar la barra de progreso cuando cargo la imagen y cuando la convierto.

¿Puedo hacer algo así con promesa y espera?