Traté de cargar la imagen usando fetch y async/await y mostrarla en el lienzo, pero no funciona. La imagen no está dibujada sobre lienzo. Se carga correctamente en el elemento img en HTML. En el lienzo, si envuelvo el código de dibujo en setTimeout, funciona, pero preferiría no hacerlo.
¿Hay alguna forma de cargar la imagen usando await and fetch y dibujarla en el lienzo sin setTimeout?
Aquí está el código:
async function loadImage(url) { let response = await fetch(url); let blob = await response.blob(); return URL.createObjectURL(blob); } let canvas = document.body.querySelector("canvas"); let ctx = canvas.getContext("2d"); let tileURL = loadImage("https://avatars.githubusercontent.com/u/92330684?s=120&v=4").then((tileURL) => { // Displaying image element in HTML works. let img = document.body.querySelector("img"); img.src = tileURL; // Displaying the image immediately in canvas doesn't work. ctx.drawImage(img, 0, 0); // But it works if I add some delay. setTimeout(() => { ctx.drawImage(img, 100, 0); }, 3000); // 3 second delay. }); canvas { border: 1px solid #000; } <canvas></canvas> <img>La carga de una imagen siempre es asíncrona, sea cual sea la fuente*. Debe esperar a que se haya cargado antes de poder hacer algo con él.
Ahora, no está claro por qué está usando fetch aquí, puede muy bien configurar el .src de la imagen en la URL directamente:
const canvas = document.body.querySelector("canvas"); const ctx = canvas.getContext("2d"); // Displaying image element in HTML works. const img = document.body.querySelector("img"); img.crossOrigin = "anonymous"; // allow read-back img.src = "https://avatars.githubusercontent.com/u/92330684?s=120&v=4"; img.onload = (evt) => // or await img.decode() if in async ctx.drawImage(img, 0, 0); canvas { border: 1px solid #000; } <canvas></canvas> <img> Sin embargo, si tiene un blob (o está obligado a usar fetch ), cree un ImageBitmap a partir de este blob directamente. Esta es la forma más eficaz de producir y almacenar un CanvasImageSource (para ser utilizado en drawImage() ).
Para los navegadores más antiguos que no admitían este método, lo cubrí a través de este polyfill mío .
async function loadImage(url) { const response = await fetch(url); const blob = response.ok && await response.blob(); return createImageBitmap(blob); } const canvas = document.body.querySelector("canvas"); const ctx = canvas.getContext("2d"); loadImage("https://avatars.githubusercontent.com/u/92330684?s=120&v=4").then((bitmap) => { ctx.drawImage(bitmap, 0, 0); }); canvas { border: 1px solid #000; } <!-- createImageBitmap polyfill for old browsers --> <script src="https://cdn.jsdelivr.net/gh/Kaiido/createImageBitmap/dist/createImageBitmap.js"></script> <canvas></canvas> <!-- HTMLImage is not needed --> * Puede suceder que las imágenes almacenadas en caché estén listas antes de la próxima llamada a drawImage() , pero nunca se debe suponer que es así.
Aunque esté usando una URL de blob en memoria, el navegador aún debe cargarla.
No está esperando que se cargue el img antes de agregarlo al lienzo, por lo que todo lo que agrega es un espacio en blanco.
Registre un controlador de eventos de carga o use el HTMLImageElement.decode() más nuevo para esperar a que la imagen esté lista antes de agregarla al lienzo.
async function loadImage(url) { let response = await fetch(url); let blob = await response.blob(); return URL.createObjectURL(blob); } const img = document.querySelector("img"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const url = "https://avatars.githubusercontent.com/u/92330684?s=120&v=4" loadImage(url).then(async (tileURL) => { // Displaying image element in HTML works. img.src = tileURL; // wait for it to load await img.decode() ctx.drawImage(img, 0, 0); }); canvas { border: 1px solid #000; } <canvas></canvas> <img>