canvas2d中createImageData的onload回调不起作用?导致图片无法绘制
wx.showToast({
title: '图片生成中...',
icon: 'none'
})
const query = wx.createSelectorQuery()
query.select('#letter_prize')
.fields({ node: true, size: true })
.exec(async (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)
// 绘制
ctx.save()
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, 540, 770)
ctx.restore()
// 获取网络图片本地路径
const letterBg = await this.getImageLocalInfo(`${config.ossStatic}letter_empty_background.png`)
const goodsImage = await this.getImageLocalInfo(this.data.letterDetail.image || 'https://emk-shop-item.oss-cn-hangzhou.aliyuncs.com/warehouse/item/7326e5b4dc07446adb163baf5dfb5928')
// 奖品图
const bgImage = ctx.createImageData(540, 320) //创建image
bgImage.src = letterBg //指定路径为getImageInfo的文件
bgImage.onload = (e) => {
console.log(e)
ctx.save()
ctx.drawImage(bgImage, 0, 0, 540, 320) //图片加载完成时draw
ctx.restore()
}