canvas2d中createImageData的onload回调不起作用?导致图片无法绘制
发布于 5 年前 作者 xiuying93 3452 次浏览 来自 问答

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()
      }

 

1 回复

getImageLocalInfo是用来获取图片的本地路径的,打印出来都是可以正常用的

回到顶部