下面是我的代码,想通过wx.getImageInfo获取网络图片后,然后用drawImage在canvas上将图片显示出来,但是一直报错。
代码如下:
onShow: function () {
var that = this
const query = wx.createSelectorQuery()
query.select('#shareCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
wx.getImageInfo({
src: that.data.photoUrl,
success(res) {
console.log("头像路径:"+res.path)
ctx.drawImage(res.path, 0, 0)
ctx.draw()
}
})
})
},
报错信息如下:
thirdScriptError
Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’;at api getImageInfo success callback function
TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’
at CanvasRenderingContext2D.e.drawImage (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:647372)
at success (http://127.0.0.1:51536/appservice/pages/card/img.js:47:15)
at Function.o.<computed> (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:1366445)
at Object.success (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:124200)
at y (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:526317)
at v (http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:526555)
at http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:528109
at n.<anonymous> (http://127.0.0.1:51536/appservice/__dev__/asdebug.js:1:12078)
at http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:124200
at http://127.0.0.1:51536/appservice/__dev__/WAService.js:2:107123
你好,可参考:Failed to execute ‘drawImage’ on 'CanvasRenderin ?? 社区技术运营专员-小柿子 的评论 - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000e801ba445d060cdb9b078b56000?_at=1583717387456&jumpto=reply&commentid=000ccc3025020865ccb96fc95514&parent_commentid=00062a9c9ecc4873c3b9e2e46560