微信小程序二维码获取, 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调用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值