uni-app保存圖片到系統(tǒng)相冊(cè)
uni-app將圖片存入系統(tǒng)的官方api是 uni.saveImageToPhotosAlbum(OBJECT)捉偏，需要給定一個(gè)文件路徑filePath倒得，官方的例子是先用uni.chooseImage選擇一張系統(tǒng)圖片霞掺，獲取到路徑再傳入uni.saveImageToPhotosAlbum保存菩彬。我在做app的時(shí)候遇到一個(gè)場(chǎng)景是后端返回的圖片是base64字符串潮梯，要存入系統(tǒng)相冊(cè)，在uni-app文檔里并沒(méi)有找到合適的解決方法耙旦，于是我將目光放到了5+ API母廷。
Bitmap
Bitmap是原生圖片對(duì)象糊肤，其有個(gè)方法是loadBase64Data馆揉；于是我們首先創(chuàng)建一個(gè)bitmap對(duì)象：
const bitmap = new plus.nativeObj.Bitmap("test");
加載base64為圖片
然后使用loadBase64Data將base64字符串轉(zhuǎn)換為bitmap文件對(duì)象：
bitmap.loadBase64Data(base64, () => {
console.log('加載圖片成功');
}, (e) => {
console.log('加載圖片失斏ā：' + JSON.stringify(e));
});
存儲(chǔ)圖片至存儲(chǔ)系統(tǒng)
再調(diào)用bimap.save方法，將圖片文件存入手機(jī)存儲(chǔ)：
bitmap.save('_doc/test.jpg', {
overwrite: true,
quality: quality
}, (i) => {
console.log('保存圖片成功');
}, (e) => {
console.log('保存圖片失斚旅妗：' + JSON.stringify(e));
});
保存到系統(tǒng)相冊(cè)
寫(xiě)到這里沥割，我們會(huì)發(fā)現(xiàn)某些手機(jī)上相冊(cè)中一直不會(huì)顯示出保存成功的圖片机杜，但控制臺(tái)打印其實(shí)并沒(méi)有問(wèn)題椒拗。其實(shí)文件是保存成功了的，只不過(guò)存在了app的相對(duì)路徑下在验，某些手機(jī)的相冊(cè)app并不會(huì)讀取這部分文件路徑枉阵，所以不會(huì)在相冊(cè)顯示出來(lái)（iOS沒(méi)有文件管理系統(tǒng)，相冊(cè)不會(huì)讀取app存儲(chǔ)空間）侦厚。這時(shí)我們可以借助uni-app保存文件到系統(tǒng)相冊(cè)的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為時(shí)間戳命名方式
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));
});
})
}
這就相當(dāng)于將已經(jīng)保存的圖片路徑獲取到膘怕，再利用uni-app的API將圖片存入系統(tǒng)相冊(cè)想诅。
