Estoy tratando de usar la función image.onload pero está ocurriendo un problema asíncrono. Estoy pasando los datos a través de la matriz, pero no se ejecuta de acuerdo con el orden de la matriz en la función image.onload. ¿Cómo puedo solucionar este problema?
Object.entries(data).forEach(element => { const brushtype = element[0]['brush'] const img = new Image(); img.onload = () => { brushctx.drawImage(img, 0, 0); } img.src = brushtype; }El problema es la forma en que solicitas esas imágenes.
Haciendo
Object.entries(data).forEach(element => { }está sucediendo al mismo tiempo virtualmente. Cualquier imagen que termine de cargarse se dibujará inmediatamente después.
Si desea que sus imágenes se dibujen en un orden específico, por ejemplo, el orden en que aparecen en la matriz, debe solicitar una nueva después de que la anterior haya terminado de cargarse.
Aquí hay un ejemplo:
let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); let myImages = ['https://picsum.photos/id/1/50/50', 'https://picsum.photos/id/22/50/50', 'https://picsum.photos/id/83/50/50', 'https://picsum.photos/id/64/50/50']; function loadImages(index) { let image = new Image(); image.onload = function(e) { context.drawImage(e.target, index % 2 * 50, parseInt(index / 2) * 50); if (index + 1 < myImages.length) { loadImages(index + 1); } } image.src = myImages[index]; } loadImages(0); <canvas id='canvas' width='200' height='200'></canvas>Para dibujar imágenes en orden de solicitud, debe esperar hasta que se hayan cargado todas las imágenes y luego dibujarlas solo cuando se haya dibujado la imagen anterior. Esta respuesta da un ejemplo de ambos enfoques.
Tenga en cuenta que si hay algún error de carga, no se puede dibujar ninguna de las imágenes. En el segundo método, un error significará que no se extraen ninguno de todos excepto uno.
El fragmento de código que se muestra a continuación se carga primero y luego se dibuja. Almacena las imágenes en una matriz de images y mantiene un recuento de las imágenes que se cargan. Contando para cada nueva imagen, y cuando una imagen se carga, cuenta hacia atrás.
Cuando el contador es cero cuando sabe que todas las imágenes se han cargado y luego puede dibujarlas todas
var imgCount = 0; const images = []; Object.entries(data).forEach(element => { const img = new Image; img.src = element[0]['brush']; images.push(img); imgCount ++; img.onload = () => { imgCount --; if (!imgCount) { for(const img of images) { brushctx.drawImage(img, 0, 0) } } } }La alternativa es volver a crear una matriz para contener todas las imágenes. Pero esta vez rastreamos lo que se ha dibujado. Cada vez que se carga una imagen, verificamos si alguna de las imágenes en la matriz anterior se ha cargado, luego dibujamos todas las imágenes hasta que encontramos una ranura de imagen vacía.
var drawnCount = 0; const images = []; Object.entries(data).forEach(element => { const img = new Image; const imgIdx = images.length; img.src = element[0]['brush']; img.onload = () => { images[imgIdx] = img; while (images[drawnCount]) { brushctx.drawImage(images[drawnCount++], 0, 0) } } images.push(null); }