How to get the image preload in javascript

Question

I have a preload link in my html.
<link rel="preload" href="sprite.png" id="mySprite" as="image"> How can I convert this to a Image in Javascript?
(let sprite = new Image(myPreloadeImageFromHTML)

I have a lot of images needed, but they do not load on time, which results in no images shown. How can I preload it and obtain it in Javscript as an Image using a <link rel="preload">?

https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Zahid Hassan Alvi, Jan 20 '22 at 15:09
Does this answer your question? [Preloading images with JavaScript](https://stackoverflow.com/questions/3646036/preloading-images-with-javascript) — Guy Nachshon, Jan 20 '22 at 15:11
But how do I use that `` tag to render the image in my canvas? — RandomCoder59, Jan 20 '22 at 15:17

score 0 · Answer 1 · answered Jan 20 '22 at 18:04

I have created a link and a canvas in HTML and using javascript I am fetching that link href then created an image from that link and then inserted that image into the canvas.

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);
}

Here is the reference: https://jsfiddle.net/uLwpsdqt/

But I don't want to reload it... I would like to have the preloaded image directly acessible by javscript... — RandomCoder59, Jan 21 '22 at 08:07

How to get the image preload in javascript

1 Answers1