微信小程序canvas不支持直接繪制base64格式圖片韭畸,按以下步驟可以繪制:
1、用wx.getFileSystemManager().writeFile方法蔓搞,把base64格式圖片轉(zhuǎn)為binary格式圖片胰丁,寫入本地;
2喂分、canvas繪制binary格式圖片锦庸;
3、繪制完畢蒲祈,用wx.getFileSystemManager().unlink方法甘萧,刪除binary格式圖片;
代碼如下:
draw: function(obj) {
let promise = new Promise((resolve, reject) => {
let filePath = `${wx.env.USER_DATA_PATH}/${obj.id}`;
wx.getFileSystemManager().writeFile({
filePath: filePath,
data: wx.base64ToArrayBuffer(this.getBase64Data(obj.url)),
encoding: 'binary',
success: () => {
console.log('寫入成功, 路徑: ', filePath);
resolve(filePath);
},
fail: err => {
reject('寫入失敯鸬А:', err);
},
});
})
return new Promise((resolve, reject) => {
promise.then(filePath => {
var ctx = wx.createCanvasContext('canvas');
ctx.drawImage(filePath, 0, 0, 300, 300);
ctx.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: res => {
let saveFilePath = res.tempFilePath;
/// 刪除寫入的數(shù)據(jù)
wx.getFileSystemManager().unlink({
filePath: filePath,
success: res => {
console.log('刪除成功, 路徑: ', filePath);
resolve(saveFilePath);
},
fail: err => {
reject('刪除失斞锞怼:', err);
}
})
},
fail: err => {
reject('保存圖片到本地失敗:', err);
}
})
})
}, err => {
reject(err);
})
})
}