微信小程序长按图片保存至相册-蒲公英云

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

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

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70

描述：

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

代码：

wxml

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

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);
      }
    })
  },
})