uni-app保存图片到系统相册

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