微信小程序canvas畫出後臺返回的小程序碼base64

後臺返回小程序碼base64格式的時候，canvas無法畫出來，得先把它寫在本地再畫出來，方法如下：

wxFunc.js：

// 寫圖片到本地
export const writeFile=(base64Str=> {
  return new Promise((resolve,reject)=>{
    let base64Image =  base64Str.split(',')[1].replace(/[\r\n]/g, ''); // 後臺返回的base64數據的回車換行換爲空字符''
    const fsm = wx.getFileSystemManager();  //文件管理器
    const FILE_BASE_NAME = 'tmp_base64src'; //文件名
    const format = 'png'; //文件後綴
    const timestamp = (new Date()).getTime();//獲取一個當前時間戳，用於區分每一個小程序碼，防止多次寫進的小程序碼圖片都一樣（建議通過不同的商品id來區分不同的小程序碼）
    const buffer = wx.base64ToArrayBuffer(base64Image),//base 轉二進制 
    filePath = `${wx.env.USER_DATA_PATH}/${timestamp}www.${format}`; //文件名
    fsm.writeFile({ //寫文件
      filePath,
      data: buffer,
      encoding: 'binary',
      success(res) {
        wx.getImageInfo({ //讀取圖片
          src: filePath,
          success: function(res) {
            let img = res.path;
            resolve(img);//把需要畫出來的圖片的臨時url暴露出去
            reject();
          },
          fail(e){
            console.log('讀取圖片報錯');
            console.log(e);
          },
          error(res) {
            console.log(res)
          }
        })
      },
      fail(e){
        console.log(e);
      }
    })
  }).catch((e)=>{
    console.log(e);
  })
})

 

在頁面中引入：

import { writeFile } from '@/utils/wxFunc'

...
...
...

//base64爲後臺返回的base64
writeFile(base64).then(img=>{
  this.QRcode = img;
}).catch(e=>{
   console.log(e);
})

後續發現了個問題，由於只寫入而沒有做刪除操作，後面寫入的文件超過最大限制後會報錯。

刪除文件方法請戳這裏