微信小程序二维码获取, canvas绘制,转图坑点解决方法总结

坑点1: 获取不到小程序码的二进制流

问题: 真机不显示二维码, 不勾选不检验合法域名时不显示二维码
解决:
https://api.weixin.qq.com该域名无法设置在request合法域名中,所以获取二维码二进制的请求应放在后台,前端再去请求后台的接口,arraybuffer数据接收

 wx.request({
      url: '请求地址', //这是后台请求地址: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.data.token,
      method: 'post',
      data: {
        scene: 'id=1&cid=2'          //参数
      },
      responseType: 'arraybuffer',   //返回数据格式, 必须
      complete: res => {
        let codebuffer = res.data
        let base64Data = wx.arrayBufferToBase64(codebuffer); //arraybuffer转base64
        const base64ImgUrl = "data:image/png;base64," + base64Data;

      }
    })

坑点2: pc上canvas显示, 真机空白

原因: 1用了网络图片 2用了base64格式图片

解决:

• 1.使用本地图片绘制,或者先下载网络图片再绘制

 wx.downloadFile({
    url: poster,         //这里poster为图片网络链接
    success: res => {
      // console.log(res.tempFilePath);
      let downloadimg = res.tempFilePath   //此处为下载的图片文件
	   ......  //后续canvas绘制逻辑
    }
  })

• 2.base64图片转临时图片再绘制

var aa = wx.getFileSystemManager();
var imgs = this.data.codeimgs;
aa.writeFile({
  filePath: wx.env.USER_DATA_PATH + '/test.png',
  data: imgs.slice(22),     //去除base64头部格式文字,我使用的是'data:image/png;base64', jpeg的话是slice(23)
  encoding: 'base64',
  success: res => {
    let nimgs = wx.env.USER_DATA_PATH + '/test.png'; //此处为转换的图片文件
    .....//后续canvas绘制逻辑 

  },
  fail: err => {
    rej(err)
  }
})

其他:

以上获二进制流格式,下载图片,转换图片都是异步操作, 绘制图片都需要再这些操作完成后进行,
建议以上异步操作写成promise对象, 最后async await调用

有问题欢迎留言