[英]Trouble using HTML Canvas with Vue.js
I am trying to upload an image using HTML canvas.我正在尝试使用 HTML canvas 上传图像。 The reason that I am using canvas, is because depending on the data I get back from the api, I will be super-imposing other little images over it, and this seems easier to do in canvas.
我使用 canvas 的原因是,根据我从 api 返回的数据,我将在其上叠加其他小图像,这在 ZFCC790C72A86190DE1B549D0DCZ.6F 中似乎更容易做到
I am trying to create a new html image like this:我正在尝试创建一个新的 html 图像,如下所示:
const imgObj = new Image()
imgObj.src = '../../pic'
ctx.drawImage(imgObj, 200, 200)
When I try to use this code in vue.js (as part of a javscript function called during the "onCreate" part of the life cycle), I am told that Image()
is not defined.当我尝试在 vue.js 中使用此代码时(作为在生命周期的“onCreate”部分调用的 javscript function 的一部分),我被告知
Image()
未定义。
So instead I have tried this:所以我尝试了这个:
const imgObj = document.createElement('img')
imgObj.src = '../../pic'
ctx.drawImage(imgObj, 20, 20)
As far as I understand it, this should do that same thing, but nothing renders when I do this.据我了解,这应该做同样的事情,但是当我这样做时没有任何渲染。
If I simply insert an <img>
into the html, the picture loads, just fine, but as I said above, I will be overlapping a bunch of smaller photos on top, and working with a bunch of images seems a lot easier to manage with canvas.如果我只是在 html 中插入一个
<img>
,图片会加载,很好,但正如我上面所说,我将在顶部重叠一堆较小的照片,并且处理一堆图像似乎更容易管理与 canvas。
Any advice is appreciated.任何建议表示赞赏。
In your second way, you need to call drawImage
inside onload
function:在第二种方式中,您需要在
onload
function 中调用drawImage
:
const imgObj= document.createElement('img')
imgObj.src = '../../pic'
imgObj.onload = function () {
ctx.drawImage(imgObj, 20, 20)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.