1. 程式人生 > 實用技巧 >uniapp 實現base64格式圖片儲存到相簿

uniapp 實現base64格式圖片儲存到相簿

開發過程中的一個需求:後端返回的一個base64格式的圖片顯示在頁面上,需要點選儲存該圖片到系統相簿。

uni-app將圖片存入系統的官方api是uni.saveImageToPhotosAlbum(OBJECT),需要給定一個檔案路徑filePath,但是這個路徑我們是沒辦法拿到的。

解決思路:需要用到Bitmap,把base64轉成bitmap檔案物件,儲存到系統相簿(但是此時某些手機上無法顯示出來,其實是儲存成功的),然後使用uni.saveImageToPhotoAlbum方法將圖片成功儲存並顯示。

1、Bitmap是原生圖片物件,其有個方法是loadBase64Data;於是我們首先建立一個bitmap物件:

2、然後使用loadBase64Data將base64字串轉換為bitmap檔案物件:

3、呼叫bimap.save方法,將圖片檔案存入手機儲存(記得bitmap.clear(),比較佔記憶體)

4、uni.saveImageToPhotoAlbum方法將圖片成功儲存並顯示

整體程式碼如下:

saveHeadImgFile() {
    let base64 = this.qrImgUrl;
    const bitmap = new plus.nativeObj.Bitmap("test");
    bitmap.loadBase64Data(base64, function() {
        
const url = "_doc/" + new Date().getTime() + ".png"; // url為時間戳命名方式 console.log('saveHeadImgFile', url) bitmap.save(url, { overwrite: true, // 是否覆蓋 // quality: 'quality' // 圖片清晰度 }, (i) => { uni.saveImageToPhotosAlbum({ filePath: url, success: function() { uni.showToast({ title:
'圖片儲存成功', icon: 'none' }) bitmap.clear() } }); }, (e) => { uni.showToast({ title: '圖片儲存失敗', icon: 'none' }) bitmap.clear() }); }, (e) => { uni.showToast({ title: '圖片儲存失敗', icon: 'none' }) bitmap.clear() }); }