微信小程序长按图片保存至相册

小鱼儿 2023-06-26 12:16 14阅读 0赞

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]

**描述：**

「长按图片」，是否授权保存图片or视频到相册，「授权成功」，点击「保存到相册」即可完成。

**代码：**

wxml

Page({
      data: {
        imgSrc: 'http://img4.99114.com/group3/M00/4F/0F/rBADvVtEac-AAohzAAMH5HgHPZY230.jpg',
      },
      // 长按保存
      saveImage(e) {
        let that = this
        wx.showActionSheet({
          itemList: ['保存到相册'],
          success(res) {
            let url = e.currentTarget.dataset.url;
            wx.getSetting({
              success: (res) => {
                console.log(res);
                if (!res.authSetting['scope.writePhotosAlbum']) {   // 未授权
                  wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: () => {
                      that.saveImgSuccess(url);
                    },
                    fail: (res) => {
                      console.log(res);
                      wx.showModal({
                        title: '保存失败',
                        content: '请开启访问手机相册的权限',
                        success(res) {
                          wx.openSetting()
                        }
                      })
                    }
                  })
                } else {  // 已授权
                  that.saveImgSuccess(url);
                }
              },
              fail: (res) => {
                console.log(res);
              }
            })
          },
          fail(res) {
            console.log(res.errMsg)
          }
        })
      },
      // 同意授权保存到相册
      saveImgSuccess(url) {
        wx.getImageInfo({
          src: url,  // 通过getImageInfo将src转换成改图片的本地路径，给saveImageToPhotosAlbum使用
          success: (res) => {
            console.log(res)
            let path = res.path;
            wx.saveImageToPhotosAlbum({
              filePath: path,   // filePath路径不能是网络图片路径
              success: (res) => {
                console.log(res);
                wx.showToast({
                  title: '已保存到相册',
                })
              },
              fail: (res) => {
                console.log(res);
              }
            })
          },
          fail: (res) => {
            console.log(res);
          }
        })
      },
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200101135621841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200101135322880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70