<canvas
type="2d"
id="canvas"
style="width: 300px; height: 300px;"
></canvas>
const app = getApp()
Page({
data: {},
onLoad: function () {
// 通过 SelectorQuery 获取 Canvas 节点
setTimeout(() => {
wx.createSelectorQuery()
.select('#canvas')
.fields({
node: true,
size: true,
})
.exec(this.init.bind(this))
}, 2000);
},
init(res) {
const width = res[0].width
const height = res[0].height
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
var that = this;
wx.downloadFile({
url: 'https://weixin-mini-1303103681.cos.ap-nanjing.myqcloud.com/qrcode/logo.png',
success: function (res1) {
const img = canvas.createImage()
img.src = res1.tempFilePath
img.onload = () => {
ctx.drawImage(img, 0, 150 - 25, 100, 50)
}
}
})
},
})
然而,我重新建了demo,同样的代码,调试基础库也是一样的,就可以使用。
将开发者工具 全部关闭,重新打开就好了
新的canvas网络图片不需要使用getImageInfo / downloadFile下载
let img = canvas.createImage() img.src = fileUrl // 网络图片地址 img.onload = e => { ctx.drawImage(img, 0, 150 - 25, 100, 50) }