预加载并将图像绘制到Vue SPA doe snot内的画布上

Question

我有一个Vue 3 SPA，在这里我操纵一些画布元素。我使用下面的函数预加载我的图像

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

在另一个函数中，我尝试使用下面的代码和上下文来drawImage预加载的映像

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

我没有绘制图像，即使我的其余代码工作，我把文本放到画布上。我能想到的最好的方法是得到一个错误，说明img不是HTMLImageElement类型，我检查了它是否为true。知道我做错了什么吗？

Answer 1

所做的工作是向模板中添加一个img，以便在创建时呈现，然后在getElementById上呈现。

<template>
...
   <img id="YOUR_ID" src="@/PATH/IMG_NAME.png" style="display: none;"/>
...
</template>

然后使用const image = document.getElementById('YOUR_ID')获取它。