1. 程式人生 > >微信小程式 base64 圖片 canvas 畫布 drawImage 實現

微信小程式 base64 圖片 canvas 畫布 drawImage 實現

在微信小程式中 canvas drawImage API 傳入的第一個引數是 imageResource 圖片資源路徑,這個引數通常由從相簿選擇圖片 wx.chooseImagewx.getImageInfo 獲取圖片資訊來獲得。

而 base64 格式圖片資料,無法被 getImageInfo 直接呼叫,以下是解決方案:

  1. 首先使用 wx.base64ToArrayBuffer 將 base64 資料轉換為 ArrayBuffer 資料
  2. 使用 FileSystemManager.writeFile 將 ArrayBuffer 資料寫為本地使用者路徑的二進位制圖片檔案
  3. 此時的圖片檔案路徑在 wx.env.USER_DATA_PATH 中, wx.getImageInfo 介面能正確獲取到這個圖片資源並 drawImage 至 canvas 上

以下是具體的 base64src.js 函式程式碼:

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';

const base64src = function(base64data) {
  return new Promise((resolve, reject) => {
    const [, format, bodyData] 
= /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; if (!format) { reject(new Error('ERROR_PARSE_BASE64')); } const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`; const buffer = wx.base64ToArrayBuffer(bodyData); fsm.writeFile({ filePath, data: buffer, encoding:
'binary', success() { resolve(filePath); }, fail() { reject(new Error('ERROR_WRITE_BASE64')); }, }); }); }; export default base64src;