微信小程序实现保存图片到本地_微信小程序开发图片如何保存

wxml代码

<view class="erweima">
      <image src="{{imgUrl}}"></image>
      <view>
            <text  bindtap="downloadImg">保存至手机相册</text>
      </view>
 </view>
1
2
3
4
5
6

js代码

   downloadImg() {
        wx.showLoading({
            title: '加载中...'
        });
        //wx.downloadFile方法：下载文件资源到本地
        wx.downloadFile({
            url: this.data.imgUrl, //图片地址
            success: function (res) {
                //wx.saveImageToPhotosAlbum方法：保存图片到系统相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath, //图片文件路径
                    success: function (data) {
                        wx.hideLoading(); //隐藏 loading 提示框
                        wx.showModal({
                            title: '提示',
                            content: '保存成功',
                            modalType: false,
                        })
                    },
                    // 接口调用失败的回调函数
                    fail: function (err) {
                        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                            wx.showModal({
                                title: '提示',
                                content: '需要您授权保存相册',
                                modalType: false,
                                success: modalSuccess => {
                                    wx.openSetting({
                                        success(settingdata) {
                                            console.log("settingdata", settingdata)
                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功,再次点击图片即可保存',
                                                    modalType: false,
                                                })
                                            } else {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败，将无法保存到相册哦~',
                                                    modalType: false,
                                                })
                                            }
                                        },
                                        fail(failData) {
                                            console.log("failData", failData)
                                        },
                                        complete(finishData) {
                                            console.log("finishData", finishData)
                                        }
                                    })
                                }
                            })
                        }
                    },
                    complete(res) {
                        wx.hideLoading(); //隐藏 loading 提示框
                    }
                })
            }
        })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62