【小程序】小程序获取请求来的base64绘制canvas

今天遇到一个问题，在这记录一下
需求是获取从后台传回来的base64文件画到canvas上
思路为获取图片后转为tempUrl进行普通绘制流程
上代码
1.首先获取图片

wx.request({
  url: url,
  method: 'GET',
  data:data,
  responseType: 'arraybuffer',
  header: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  success: function (res) {
    resolve(res.data)
  },
  fail: function (res) {
    reject(res)
  }
})

这样获取回来的就是ArrayBuffer不须要用wx.base64ToArrayBuffer再作额外处理
2.使用 FileSystemManager.writeFile将 ArrayBuffer 数据写为本地用户路径的二进制图片文件

const fsm = wx.getFileSystemManager()
 
function base64src(buffer, callback) {
  const time = new Date().getTime()
  const filePath = `${wx.env.USER_DATA_PATH}/${time}`
  fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success() {
      callback(filePath);
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'))
    },
  })
}

3.在页面中处理返回回来的地址

base64src(res, function(url){
  wx.downloadFile({
    url: url,
    success: (res2) => {
      that.drawQrcode(res.tempFilePath)
    }
  })
})