Tengo una Vue 3 SPA donde manipulo algunos elementos del lienzo. Precargué mi imagen usando la función a continuación
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) }; }) }, En otra función, trato de drawImage Imagen la imagen precargada usando el código a continuación y un contexto
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); } )No obtengo la Imagen dibujada aunque el resto de mi código funciona y obtengo el texto en el lienzo. Lo mejor que se me ocurrió es obtener un error que dice que img no es del tipo HTMLImageElement, que comprobé que era cierto. ¿Alguna idea de lo que estoy haciendo mal?
Una solución fue agregar un img a la plantilla para que se represente en la creación y luego getElementById .
<template> ... <img id="YOUR_ID" src="@/PATH/IMG_NAME.png" style="display: none;"/> ... </template> y luego obtenerlo usando una const image = document.getElementById('YOUR_ID') .