在 Vue SPA 中预加载图像并将其绘制到 canvas 上不起作用

Question

我有一个 Vue 3 SPA，我可以在其中操作一些 canvas 元素。我使用下面的函数预加载我的图像

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

我没有绘制图像，即使我的其余代码工作正常并且我将文本添加到 canvas。我能想到的最好的办法是得到一个错误，说 img 不是我检查过的 HTMLImageElement 类型。知道我做错了什么吗？

Answer 1

解决方法是向模板添加 img，以便在创建时呈现它，然后 getElementById。

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

然后使用 const image = document.getElementById('YOUR_ID').

获取它

在 Vue SPA 中预加载图像并将其绘制到 canvas 上不起作用

Preloading and drawing an Image onto a canvas inside a Vue SPA doe snot work

html

javascript

canvas

vue.js