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 or VideoFrame)
wx.createSelectorQuery()
.select('#canvas') // 在 WXML 中填入的 id
.fields({
node: true,
size: true
})
.exec((res) => {
console.log(res)
dpr = wx.getSystemInfoSync().pixelRatio
canvas = res[0].node // 重点1
// console.log(canvas)
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath();
ctx.scale(dpr, dpr)
bg = canvas.createImage()
bg.src = '/img/lz.jpg'
bg.onload = () => {
ctx.drawImage(bg, 0, 0)
}
})
ctx.drawImage(canvas,
magnifyRectangle.x - magnifyGlassRadius,
magnifyRectangle.y - magnifyGlassRadius,
magnifyRectangle.width,
magnifyRectangle.height,
magnifyRectangle.x - 2 * magnifyGlassRadius,
magnifyRectangle.y - 2 * magnifyGlassRadius,
scaledMagnifyRectangle.width,
scaledMagnifyRectangle.height
)
参考一下https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
https://developers.weixin.qq.com/s/CFzXgHmI78B6
以上是代码片段