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

效果图:

描述:

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

代码:

wxml

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

js

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);
      }
    })
  },
})
发布了270 篇原创文章 · 获赞 50 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/Miss_liangrm/article/details/103792517
今日推荐