小程序实现保存图片到相册

在开发过程中经常遇到保存图片到相册的需求，主要有两种一是保存服务器地址图片，还有一种是保存canvas生成的base64格式图片，下面来讲解分别怎么实现。

保存服务器地址图片到相册

// 查看是否有 `scope.writePhotosAlbum` 权限
wx.getSetting({
    success: res => {
        if (!res.authSetting['scope.writePhotosAlbum']) {

            // 申请所需权限
            wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => {
                    // 授权成功保存图片
                    saveToAlbum();
                },
                fail: () => {
                    // 授权失败
                }
            });
        } else {
            // 用户到设置中同意保存相册权限后再次保存到相册
            saveToAlbum();
        }
    }
});

// 保存图片到相册
function saveToAlbum() {
    // 下载图片资源到本地
    wx.downloadFile({
        url: imgUrl,
        success: function (res) {
            // 保存图片到相册
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                    // 保存成功
                },
                fail: () => {
                    // 保存失败
                }
            });
        },
        fail: () => {
            // 下载失败
        }
    });
}

保存base64格式图片到相册

// 查看是否有 `scope.writePhotosAlbum` 权限
wx.getSetting({
    success: res => {
        if (!res.authSetting['scope.writePhotosAlbum']) {

            // 申请所需权限
            wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: () => {
                    // 授权成功保存图片
                    saveToAlbum();
                },
                fail: () => {
                    // 授权失败
                }
            });
        } else {
            // 用户到设置中同意保存相册权限后再次保存到相册
            saveToAlbum();
        }
    }
});

// 保存图片到相册
function saveToAlbum() {
    // 把base64的图片转化成ArrayBuffer数据
    const buffer = wx.base64ToArrayBuffer(img.replace(/^data:\w+\/\w+;base64,/, ''));
    // 指定图片的临时路径
    const path = `${wx.env.USER_DATA_PATH}/image_name.png`;
    // 获取小程序的文件系统
    const fsm = wx.getFileSystemManager();
    // 把arraybuffer数据写入到临时目录中
    fsm.writeFile({
        filePath: path,
        data: params,
        encoding: 'binary',
        success: () => {
            // 把临时路径下的图片，保存至相册
            wx.saveImageToPhotosAlbum({
                filePath: path,
                success: () => {
                    // 保存成功
                },
                fail: () => {
                    // 保存失败
                }
            });
        },
        fail: () => {
            // 写入失败
        }
    });
}