微信小程序长按保存图片

• 微信浏览器打开h5页面如果是img标签的话，长按会弹出保存图片的选项。但是微信小程序里面不可以，需要自己写这个功能。
• 这个功能有两个点，一个是长按，一个是保存图片到本地。

1. 微信小程序关于图片长按的解释，有两种：

因此我们选用 bindlongpress 事件

2. 微信小程序同样提供了保存图片的接口，是wx.saveImageToPhotosAlbum()

3. 值得说的是，保存的接口，两个需要注意的地方：

1、需要先授权，调用wx.getSetting()方法

2、保存的图片路径参数，不支持网络路径，而在我们渲染页面时，用到的图片有很大可能是网络路径，这时候我们需要先把网络路径转为可用的本地路径，wx.getImageInfo()方法可以满足需要

4. 最后再走个心吧，毕竟我这么可爱

1、长按后直接保存未免潦草了些，考虑到用户体验，加入wx.showActionSheet()
2、如果用户拒绝授权 或者 以前拒绝过授权，这时候也应该给他提示，或者展示再次打开授权的入口

将将！然后就可以开始写代码了：

<image src="{{url}}" data-url="{{url}}" bindlongpress="saveImage"></image>
1

// 长按保存功能--授权部分
saveImage (e) {
    let _this = this
    wx.showActionSheet({
        itemList: ['保存到相册'],
        success(res) {
            let url = e.currentTarget.dataset.url;
            wx.getSetting({
                success: (res) => {
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                        wx.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success: () => {
                                // 同意授权
                                _this.saveImgInner(url);
                            },
                            fail: (res) => {
                                console.log(res);
                                wx.showModal({
                                    title: '保存失败',
                                    content: '请开启访问手机相册权限',
                                    success(res) {
                                        wx.openSetting()
                                    }
                                })
                            }
                        })
                    } else {
                        // 已经授权了
                        _this.saveImgInner(url);
                    }
                },
                fail: (res) => {
                    console.log(res);
                }
            })   
        },
        fail(res) {
            console.log(res.errMsg)
        }
    })
},
// 长按保存功能--保存部分
saveImgInner (url) {
    wx.getImageInfo({
        src: url,
        success: (res) => {
            let path = res.path;
            wx.saveImageToPhotosAlbum({
                filePath: path,
                success: (res) => {
                    console.log(res);
                    wx.showToast({
                        title: '已保存到相册',
                    })
                },
                fail: (res) => {
                    console.log(res);
                }
            })
        },
        fail: (res) => {
            console.log(res);
        }
    })
},
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
63
64
65
66

文章写的比较正序，参考的是这篇倒序文章，喜欢倒序的筒子们可以去看下这篇： https://www.jianshu.com/p/e592e9b28192

到这里文章差不多就结束了。

————————————————————————————————————————

但是，但是，考虑到回调地狱的问题，决定做一下优化：

<image src="{{url}}" data-url="{{url}}" bindlongpress="saveImage"></image>
1

  // 长按保存功能
  saveImage (e) {
    const url = e.currentTarget.dataset.url;
    const { saveImage1, saveImage2, saveImage3, saveImage4 } = this
    saveImage1(url).then(saveImage2).then(saveImage3).then(saveImage4)
  },
  // 吊起 actionsheet
  saveImage1 (url) {
    const p1 = new Promise((resolve, reject) => {
      wx.showActionSheet({
        itemList: ['保存到相册'],
        success: res => {
          resolve(url)
        },
        fail: err => {
          reject(err)
        }
      })
    })
    return p1
  },
  // 授权
  saveImage2 (url) {
    const p2 = new Promise((resolve, reject) => {
      wx.getSetting({
        success: settings => {
          if (!settings.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                  // 同意授权
                  resolve(url)
              },
              fail: () => {
                  wx.showModal({
                      title: '保存失败',
                      content: '请开启访问手机相册权限',
                      success: () => {
                        wx.openSetting()
                      }
                  })
                  reject()
              }
            })
          } else {
            // 已经有权限了
            resolve(url)
          }
        }
      })
    })
    return p2
  },
  // 转换图片格式为本地路径
  saveImage3 (url) {
    const p3 = new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: url,
        success: res => {
          resolve(res.path)
        },
        fail: () => {
          reject()
        }
      })
    })
    return p3
  },
  // 保存
  saveImage4 (path) {
    const p4 = new Promise((resolve, reject) => {
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success: () => {
            wx.showToast({
               title: '已保存到相册',
            })
        },
        fail: err => {
          console.log(err)
        }
      })
    })
    return p4
  },
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

然后这才算是结束！