【小程序】小程序獲取請求來的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)
    }
  })
})