收藏
回答

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

回答关注问题邀请回答
收藏

2 个回答

  • 『空白』
    『空白』
    2020-06-01

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

    2020-06-01
    有用 1
    回复 1
    • Garin
      Garin
      2020-12-28
      老铁,找到解决办法了吗?
      2020-12-28
      回复
  • Sound
    Sound
    2020-08-27

    同样的问题,请问有解决办法了吗?

    2020-08-27
    有用
    回复
登录 后发表内容
问题标签