在微信小程序中 canvas drawImage API 傳入的第一個參數是 imageResource 圖片資源路徑,這個參數一般由從相冊選擇圖片 wx.chooseImage 或 wx.getImageInfo 獲取圖片信息來得到。html
而 base64 格式圖片數據,沒法被 getImageInfo 直接調用,如下是解決方案: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;