收藏
回答

canvas 2d createImage 网络图片报错500?

<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(img0150 - 2510050)
        }
      }
    })
  },
})



然而,我重新建了demo,同样的代码,调试基础库也是一样的,就可以使用。

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

2 个回答

  • 袁栋彬
    袁栋彬
    2021-09-25

    将开发者工具 全部关闭,重新打开就好了

    2021-09-25
    有用 1
    回复 3
    • 木头
      木头
      2021-10-30
      大哥真牛批
      2021-10-30
      回复
    • 欢乐马
      欢乐马
      2021-11-11
      但是手机也会报这个错,不能叫用户把小程序删了再进入啊
      2021-11-11
      回复
    • 小杰
      小杰
      2021-11-19
      每次修改代码报错,都会报500,需要每次都重新打开开发工具,太难了
      2021-11-19
      回复
  • 小杰
    小杰
    2021-11-19

    新的canvas网络图片不需要使用getImageInfo / downloadFile下载

    let img = canvas.createImage()
    img.src = fileUrl  // 网络图片地址
    img.onload = e => {
      ctx.drawImage(img, 0150 - 2510050)
    }
    
    2021-11-19
    有用
    回复
登录 后发表内容