组件: canvas type="2d" class="canvas"
API 使用如下:
const query = wx.createSelectorQuery()
wx.getImageInfo({
src:"https://xxx.jpg",
success: function(picRes) {
query.select('.canvas')
.fields({ node: true, size: true })
.exec((res) => {
var canvas = res[0].node
var context = canvas.getContext('2d')
context.drawImage(picRes.path, 100, 100, 100, 100)
})
}
)
}
})
报错如下图 望解答
小程序都这么大体量了,文档都不好好写清楚,真是垃圾
canvas的2d绘图模式的drawImage已经不是这么使用的了。
<!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas> <!-- js --> const image = canvas.createImage();//创建image image.src = picRes.path;//指定路径为getImageInfo的文件 image.onload = () => { ctx.drawImage(image, 0, 0, 100, 200)//图片加载完成时draw }
参考文档:
RenderingContext | 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/RenderingContext.html
官方demo:
https://developers.weixin.qq.com/s/SHfgCmmq7UcM
示例代码:https://developers.weixin.qq.com/s/jEgclWmV7VgO