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将图片存入系统相册。