使用 HTML Canvas 與 Vue.js 時出現問題

Question

我正在嘗試使用 HTML canvas 上傳圖像。 我使用 canvas 的原因是，根據我從 api 返回的數據，我將在其上疊加其他小圖像，這在 ZFCC790C72A86190DE1B549D0DCZ.6F 中似乎更容易做到

我正在嘗試創建一個新的 html 圖像，如下所示：

    const imgObj = new Image()
    imgObj.src = '../../pic'
    ctx.drawImage(imgObj, 200, 200) 

當我嘗試在 vue.js 中使用此代碼時（作為在生命周期的“onCreate”部分調用的 javscript function 的一部分），我被告知Image()未定義。

所以我嘗試了這個：

    const imgObj = document.createElement('img')
    imgObj.src = '../../pic'
    ctx.drawImage(imgObj, 20, 20)

據我了解，這應該做同樣的事情，但是當我這樣做時沒有任何渲染。

如果我只是在 html 中插入一個<img> ，圖片會加載，很好，但正如我上面所說，我將在頂部重疊一堆較小的照片，並且處理一堆圖像似乎更容易管理與 canvas。

任何建議表示贊賞。

Answer 1

在第二種方式中，您需要在onload function 中調用drawImage ：

const imgObj= document.createElement('img')
imgObj.src = '../../pic'

imgObj.onload = function () {
   ctx.drawImage(imgObj, 20, 20)
}