uni-app保存圖片到系統相冊

uni-app將圖片存入系統的官方api是 uni.saveImageToPhotosAlbum(OBJECT)，需要給定一個文件路徑filePath，官方的例子是先用uni.chooseImage選擇一張系統圖片，獲取到路徑再傳入uni.saveImageToPhotosAlbum保存。我在做app的時候遇到一個場景是后端返回的圖片是base64字符串，要存入系統相冊，在uni-app文檔里并沒有找到合適的解決方法，于是我將目光放到了5+ API。

Bitmap

Bitmap是原生圖片對象，其有個方法是loadBase64Data；于是我們首先創建一個bitmap對象：

const bitmap = new plus.nativeObj.Bitmap("test"); 

加載base64為圖片

然后使用loadBase64Data將base64字符串轉換為bitmap文件對象：

bitmap.loadBase64Data(base64, () => {
    console.log('加載圖片成功');
}, (e) => {
        console.log('加載圖片失敗：' + JSON.stringify(e));
});

存儲圖片至存儲系統

再調用bimap.save方法，將圖片文件存入手機存儲：

bitmap.save('_doc/test.jpg', { 
    overwrite: true,
    quality: quality
}, (i) => { 
    console.log('保存圖片成功');  
}, (e) => {
    console.log('保存圖片失敗：' + JSON.stringify(e));
});

保存到系統相冊

寫到這里，我們會發現某些手機上相冊中一直不會顯示出保存成功的圖片，但控制臺打印其實并沒有問題。其實文件是保存成功了的，只不過存在了app的相對路徑下，某些手機的相冊app并不會讀取這部分文件路徑，所以不會在相冊顯示出來（iOS沒有文件管理系統，相冊不會讀取app存儲空間）。這時我們可以借助uni-app保存文件到系統相冊的API將圖片成功保存并顯示：

uni.saveImageToPhotosAlbum({
    filePath: '_doc/test.jpg',
    success: function() {
        console.log('保存圖片成功');  
    }
});

封裝

最后將這塊代碼封裝：

// 保存圖片
export function saveHeadImgFile(base64, quality) {
    const bitmap = new plus.nativeObj.Bitmap("test");
    return new Promise((resolve, reject) => {
        // 從本地加載Bitmap圖片
        bitmap.loadBase64Data(base64, function() {
            const url = "_doc/" + getTimeStamps() + ".png";  // url為時間戳命名方式
            bitmap.save(url, {
                overwrite: true,  // 是否覆蓋
                quality: quality  // 圖片清晰度
            }, (i) => {
                uni.saveImageToPhotosAlbum({
                    filePath: url,
                    success: function() {
                        resolve({
                            code: 0,
                            msg: '保存成功',
                            filePath: url
                        });
                    }
                });
            }, (e) => {
                reject('保存圖片失敗：' + JSON.stringify(e));
            });
        }, (e) => {
            reject('加載圖片失敗：' + JSON.stringify(e));
        });
    })
}

這就相當于將已經保存的圖片路徑獲取到，再利用uni-app的API將圖片存入系統相冊。