小程序-长按保存图片

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

1,、微信小程序提供了长按的事件，叫bindlongpress
2、微信小程序同样提供了保存图片的接口，是wx.saveImageToPhotosAlbum()
弄清楚了，我们可以开始做这个功能了，首先写wxml

然后就是js代码了

Page({
  /**
   * 页面的初始数据
   */
  data: {
    url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
  },
  // 长按保存图片
  saveImg(e){
      let url = e.currentTarget.dataset.url;
      wx.saveImageToPhotosAlbum({
          filePath:url,
          success(res) { 
            console.log(res);
          },
          fail(res){
            console.log(res);
          }
        })
  }
})

这样写感觉没问题，但是不行，为什么，看下面文档说明。

image.png

遇到了两个问题：
1、需要授权
2、路径不能是网络路径
一个问题一个问题解决，首先长按之后，不去保存图片，先去判断用户是否授权，这个接口就不多讲了，之前写过。
直接贴上代码

wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success:()=> {
              // 同意授权
            },
            fail: (res) =>{
              console.log(res);
            }
          })
        }else{
          // 已经授权了
        }
      },
      fail: (res) =>{
        console.log(res);
      }
    }) 

授权问题解决了以后，要处理另外一个问题，就是图片不能是网络路径。这个时候我们可以用到另外一个接口，叫wx.getImageInfo()

image.png

通过文档看到，这个接口是可以接收网络路径的，返回的是本地路径。所以我们先用这个接口把网络路径转化一下，再拿去给wx.saveImageToPhotosAlbum用。

wx.getImageInfo({
      src: url,
      success:(res)=> {
        let path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath:path,
          success(res) { 
            console.log(res);
          },
          fail:(res)=>{
            console.log(res);
          }
        })
      },
      fail:(res)=> {
        console.log(res);
      }
    })

所以整体的代码是这样子的

Page({
  data: {
      url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
  },
  // 长按保存图片
  saveImg(e){
    let url = e.currentTarget.dataset.url;
    //用户需要授权
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success:()=> {
              // 同意授权
              this.saveImg1(url);
            },
            fail: (res) =>{
              console.log(res);
            }
          })
        }else{
          // 已经授权了
          this.saveImg1(url);
        }
      },
      fail: (res) =>{
        console.log(res);
      }
    })   
  },
  saveImg1(url){
    wx.getImageInfo({
      src: url,
      success:(res)=> {
        let path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath:path,
          success:(res)=> { 
            console.log(res);
          },
          fail:(res)=>{
            console.log(res);
          }
        })
      },
      fail:(res)=> {
        console.log(res);
      }
    })
  },
})