小程序实现图片保存到相册功能的完整指南

一、选取图片并获取临时路径

1、首先需要在小程序中使用API来选取所需保存的图片，并通过success回调函数获取到这些图片的临时文件路径列表。

wx.chooseImage({
    success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        // 执行下一步操作
    }
})

2、依据具体需求，选择其中一张或多张图片进行操作。举例来说，选择一张图片并将其展示在页面上：

// HTML代码
<image src="{{imgUrl}}"></image>

// JS代码
var tempFilePaths = res.tempFilePaths;
this.setData({
    imgUrl: tempFilePaths[0]
});

二、保存图片到相册

1、使用API可以将图片保存到手机相册中。调用该API时需要传入图片的临时路径，在success回调函数中可以做相应操作。

wx.saveImageToPhotosAlbum({
    filePath: tempFilePaths[0],
    success: function(res) {
        console.log('保存成功');
    },
    fail: function(res) {
        console.log('保存失败', res);
    }
})

2、在新版本的微信开发工具中，调用该API需要在app.json文件中”setting”字段中添加相关权限设置：

"mp-weixin": {
    "appid": "wx1111111111111",
    "setting": {
        "urlCheck": true,
        "es6": false,
        "enhance": false,
        "postcss": false,
        "preloadBackgroundData": false,
        "functionalPages": false,
        "minified": false,
        "requestDomain": [],
        "wsRequestDomain": [],
        "uploadDomain": [],
        "downloadDomain": [],
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息将用于小程序定位功能"
            }
        },
        "sitemapLocation": "sitemap.json"
    }
}

三、完整示例代码

综合以上两部分，下面给出一个完整的示例代码：

<view class="container">
    <view class="btn" bindtap="saveImage">保存图片</view>
    <image src="{{imgUrl}}"></image>
</view>

Page({
    data: {
        imgUrl: ''
    },
    saveImage: function() {
        var that = this;
        wx.chooseImage({
            success: function(res) {
                var tempFilePaths = res.tempFilePaths;
                that.setData({
                    imgUrl: tempFilePaths[0]
                });
                wx.saveImageToPhotosAlbum({
                    filePath: tempFilePaths[0],
                    success: function(res) {
                        console.log('保存成功');
                    },
                    fail: function(res) {
                        console.log('保存失败', res);
                    }
                })
            }
        })
    }
})

四、注意事项

1、在进行图片保存操作时，请确认已经向用户申请了相应的授权，否则操作失败；

2、在调用saveImageToPhotosAlbum时，需确保传入的图片路径存在且正确；

3、在进行图片选取操作时，建议按照小程序官方文档要求的姿势实现；

4、在保存图片到相册时，需要暂停所有音视频的播放。