I have a Vue 3 SPA where I manipulate some canvas elements. I preload my image using the function below
async preloadLogo () {
return new Promise( (resolve) => {
var logo_img_temp = new Image();
const logo_src = require("../assets/eccc_logo.png");
logo_img_temp.src = logo_src;
logo_img_temp.onload = ( ) => {
resolve(logo_img_temp)
};
})
},
In another function I try to drawImage the preloaded image using the code below and a context
var ctx = composedCnv.getContext('2d');
...
this.preloadLogo().then(
( img ) => {
console.log(img instanceof HTMLImageElement,img.tagName, img); returns true IMG <img .../>
ctx.drawImage(img, 50,50);
}
)
I do not get the Image drawn even though the rest of my code works and I get the text onto the canvas. The best I could come up with is to get an error saying img is not of type HTMLImageElement which I checked to be true. Any idea what i am doing wrong?
A work around was adding an img to the template so it is rendered on creation and then getElementById.
<template>
...
<img id="YOUR_ID" src="@/PATH/IMG_NAME.png" style="display: none;"/>
...
</template>
and then fetching it using a const image = document.getElementById('YOUR_ID').