微信小程序 base64 圖片 canvas 畫布 drawImage 實現
阿新 • • 發佈:2018-11-05
方案 [] inf 選擇圖片 mini ase odin spa 微信
在微信小程序中 canvas drawImage API 傳入的第一個參數是 imageResource 圖片資源路徑,這個參數通常由從相冊選擇圖片 wx.chooseImage 或 wx.getImageInfo 獲取圖片信息來獲得。
而 base64 格式圖片數據,無法被 getImageInfo 直接調用,以下是解決方案:
- 首先使用 wx.base64ToArrayBuffer 將 base64 數據轉換為 ArrayBuffer 數據
- 使用 FileSystemManager.writeFile 將 ArrayBuffer 數據寫為本地用戶路徑的二進制圖片文件
- 此時的圖片文件路徑在 wx.env.USER_DATA_PATH 中, wx.getImageInfo 接口能正確獲取到這個圖片資源並 drawImage 至 canvas 上
以下是具體的 base64src.js 函數代碼,註意寫文件時去掉 base64 的頭信息:
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_BASE64SRC_PARSE‘)); } 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_BASE64SRC_WRITE‘)); }, }); }); }; export default base64src;
微信小程序 base64 圖片 canvas 畫布 drawImage 實現