As imagens desenhadas na tela do miniprograma não são exibidas na máquina real

Quando o miniaplicativo desenha imagens na tela, o dispositivo real não as exibe.

Análise: A tela do miniprograma não pode desenhar imagens de rede, portanto, o método wx.downloadFile() ou wx.getImageInfo() é necessário para carregar as imagens de rede localmente e depois desenhá-las.

Use wx.downloadFile para obter o caminho temporário da imagem

const ctx = wx.createCanvasContext('myCanvas') //获取canvas画布对象
 wx.downloadFile({
          url: 'https://example.com/audio/123',//网络路径
          success: res=> {
          	let path = res.tempFilePath //临时本地路径
          	ctx.drawImage(path, this.shiftSize(0), this.shiftSize(71), this.shiftSize(300), this.shiftSize(168)) //绘制画布上的路径
       		ctx.draw(true) //绘制
          }
        })

Use wx.getImageInfo para obter o caminho temporário da imagem para desenho

wx.getImageInfo({
      src: app_img, //网络图片路径
      success: res => {
        console.log(res.path,'s2')
        let path = res.path; //图片临时本地路径
        ctx.drawImage(path, this.shiftSize(192), this.shiftSize(249), this.shiftSize(93), this.shiftSize(93))
        ctx.draw(true)
      }
    })

A obtenção do caminho temporário é uma operação assíncrona, portanto devemos encapsulá-la com uma promessa

getGoodsImgPath:function(){
    return new Promise((success, fail) => {
      if (this.data.goods_img_path) {
        success(this.data.goods_img_path);
      } else {
        wx.getImageInfo({
          src: this.data.goodsInfo.img_url,
          success: res => {
            this.setData({
              goods_img_path: res.path
            })
            success(res.path);
          },
          fail: res => {
            fail(res);
          }
        })
      }
    });
  },

Chamado dentro da função draw

this.getGoodsImgPath().then((res) => {
        ctx.save()//保存当前的绘图上下文。
        ctx.drawImage(res, this.shiftSize(0), this.shiftSize(71), this.shiftSize(300), this.shiftSize(168));//绘制图片
        ctx.restore()
        // ctx.draw(true)
        this.getQrCodePath().then((res) => {
          ctx.save()//保存当前的绘图上下文。
          ctx.drawImage(res, this.shiftSize(192), this.shiftSize(249), this.shiftSize(93), this.shiftSize(93))
          // ctx.draw(true)
          ctx.restore()
          ctx.draw()
        });
      });