Tengo un enlace de precarga en mi html.
<link rel="preload" href="sprite.png" id="mySprite" as="image"> ¿Cómo puedo convertir esto en una Image en Javascript?
( let sprite = new Image(myPreloadeImageFromHTML)
Necesito muchas imágenes, pero no se cargan a tiempo, lo que da como resultado que no se muestren imágenes. ¿Cómo puedo precargarlo y obtenerlo en Javscript como una Image usando un <link rel="preload"> ?
Creé un enlace y un lienzo en HTML y usando javascript estoy obteniendo ese enlace href, luego creé una imagen de ese enlace y luego inserté esa imagen en el lienzo.
HTML:
<!-- Your Link --> <link rel="preload" href="https://www.android-examples.com/wp-content/uploads/2016/03/demo_image.jpg" id="mySprite" as="image"> <!-- Create Canvas --> <canvas id="my-canvas" />JS:
var img1 = new Image(); img1.src = document.getElementById("mySprite").href; var c = document.getElementById("my-canvas"); var ctx = c.getContext("2d"); img1.onload = function () { c.width = img1.width; c.height = img1.height; ctx.drawImage(img1, 0, 0); }Aquí está la referencia: https://jsfiddle.net/uLwpsdqt/