javascript - 在 Vue.js 中使用 HTML Canvas 时遇到问题

Question

我正在尝试使用 HTML Canvas 上传图像。我使用 canvas 的原因是，根据我从 api 返回的数据，我将在其上叠加其他小图像，这在 canvas 中似乎更容易做到。

我正在尝试像这样创建一个新的 html 图像:

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

当我尝试在 vue.js 中使用此代码时(作为在生命周期的“onCreate”部分调用的 javscript 函数的一部分)，我被告知 Image()未定义。

所以我试过这个:

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

据我所知，这应该做同样的事情，但当我这样做时没有任何渲染。

如果我简单地插入一个 <img>进入 html，图片加载，很好，但正如我上面所说，我将在顶部重叠一堆较小的照片，使用 canvas 处理一堆图像似乎更容易管理。

如有任何建议，我们将不胜感激。

Answer 1

在第二种方式中，您需要在onload 函数中调用drawImage:

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

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