小程序canvas繪制base64數據格式圖片

翻了微信小程序官方文檔，看了看畫板drawImage的用法，官方對所要繪制的圖片資源路徑並沒有很詳細，模棱兩可，沒說支持什么格式的路徑。今天我就試一下支不支持base64格式的圖片

 

 

隨便找張圖片從網上base64轉化

 

 

小程序繪制功能着實搞好了

 

 

剩下就是將所要繪制的圖片資源替換成base64數據了，然后再工具上看效果

 

 

繪制效果在工具上雖然是正常的，可是到了真機調試，就不正常了，啥都沒有

 

 

 

 

 base64格式的圖片在真機調試上無用，真是郁悶，不能直接渲染，那只好將base64圖片轉化網絡圖片了，怎么轉就是個問題了。

如何做？這就需要用到微信的文件系統了！將base格式圖片放到暫存文件中，改為新的路徑

方法如下：

  //將base64圖片轉網絡圖片
  send_code(code) {
    /*code是指圖片base64格式數據*/
    //聲明文件系統
    const fs = wx.getFileSystemManager();
    //隨機定義路徑名稱
    var times = new Date().getTime();
    var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';

    //將base64圖片寫入
    fs.writeFile({
      filePath: codeimg,
      data: code.slice(22),
      encoding: 'base64',
      success: () => {
        //寫入成功了的話，新的圖片路徑就能用了
        this.huizhi({},codeimg);
      }
    });
  },

瞧瞧真機上的效果：

 

 大功告成！需要源碼的，可前往

https://github.com/murenziwei/wx-canvas-base64.git