小程序實現圖片保存到相冊功能的完整指南

一、選取圖片並獲取臨時路徑

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、在保存圖片到相冊時，需要暫停所有音視頻的播放。