[开发]小程序 长按保存图片

首先，我们了解一下功能需求
详情页：

1. 点击图片，实现预览功能
2. 在图片预览时，长按图片，下方弹出弹框，选项为【保存】，【取消】
3. 点击保存，保存图片

调起微信弹框wx.showActionSheet

看一下官方文档，注意传参类型。

页面中全屏预览图片wx.previewImage

第一步点击图片，实现预览功能。我想到的是使用微信提供的图片预览工具 wx.previewImage（但是没有使用这个方法，理由往下看。）

看官方文档，应该是可以实现这个功能的。但是我不知道这个长按的方法要在哪里触发……这就很尴尬，也搜了很久，没有找到妥当的处理方法。所以就放弃了这种写法。（如果有同行知道如何解决，烦请告知呀！毕竟用这个方法真的还挺省事的）

我的解决方法是，自己写一个view，里面放图片（因为我这里的要求是放大单张图片，所以就没有考虑用swiper了。图片需要处理展示问题「高度居中」图片在加载时可以触发bindload方法，我们在这里处理图片。）

下面是完整代码，仅供参考

wxml

<!-- 图片点击事件-->
<image class='banner' src='{{"https://cdn.juliye.net/" + goods_detail.img +"?imageView2/1/w/500/h/500"}}' bindtap="blowUpImg"  data-img='{{"https://cdn.juliye.net/" + goods_detail.img}}'></image>

<!-- 预览图片的cover —— catchtap可以解决点击穿透问题 -->
<view class='bigerImg' wx:if='{{showBiger}}' bindtap="closeBiger">
    <image src='{{bigImg}}' class='BI_item' catchlongtap="saveImage" bindload="imageLoad" style="width:{{ viewWidth }}rpx; height:{{ viewHeight }}rpx;margin-top:{{mgt}}rpx" mode="aspectFit"></image>
  </view>

wxss

.bigerImg{
  width: 100%;
  height: 100%;
  line-height: 100%;
  background: #000000;
  position: fixed;
  top: 0;
  text-align: center;
}
.BI_item{
  display: block;
}

js

//部分data

data:{
	bigImg: '',//放大图片地址
    showBiger: false,
    viewWidth:'',
    viewHeight:'',
    mgt:''
}

//图片处理
imageLoad: function (e) {
    let that =this;
    console.log(e);
    let $width = e.detail.width;    //获取图片真实宽度
    let $height = e.detail.height;
    let ratio = $width / $height;    //图片的真实宽高比例
    let viewWidth = wx.getSystemInfoSync().windowWidth*2;          //设置图片显示宽度，左右留有16rpx边距
    let viewHeight = viewWidth / ratio;    //计算的高度值

    let screenHeight = wx.getSystemInfoSync().windowHeight*2;//屏幕高度
    console.log(screenHeight);
    console.log(viewHeight);
    let y = (screenHeight - viewHeight)/2

    that.setData({
      viewWidth: viewWidth,
      viewHeight: viewHeight
    })
    if(y>0){
      this.setData({
      mgt: y
      })
    }
  }
  
blowUpImg(e) {
    let that = this;
    that.setData({
      bigImg: e.currentTarget.dataset.img,
      showBiger: true
    })
  },
  
//长按弹出选框--保存图片&取消
  saveImage(e) {
    let that =this;
    console.log(e);
    //调起操作菜单
    wx.showActionSheet({
   	   //我这里只使用到了保存功能，取消是控件自带的，不用传
      itemList: ['保存'],
      success(res) {
        //这里点击选项成功以后调起方法，可根据返回的res.tapIndex
        //知道点击的对象
        //console.log(res.tapIndex);
        if (res.tapIndex == 0) {
          let url = that.data.bigImg;
          //用户需要授权—保存图片需要授权，且网络图片需先下载
          //官方文档——图片文件路径，可以是临时文件路径
          //或永久文件路径 (本地路径) ，不支持网络路径
          wx.getSetting({
            success: (res) => {
              if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success: () => {
                    // 同意授权
                    that.saveImg1(url);
                  },
                  fail: (res) => {
                    console.log(res);
                    //这里取消保存图片授权，重新调起的解决方法，
                    //可以看我的上一篇文章[小程序 canvas简单教程]，
                    //里面有处理方法，这里不再详写啦
                  }
                })
              } else {
                // 已经授权了，就可以调起下载功能
                that.saveImg1(url);
              }
            },
            fail: (res) => {
              console.log(res);
            }
          })
        }else{
          that.setData({
            showBiger: false
          })
        }
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  },
  
//保存图片 —— 下载网络图片后保存【取名废物在此】
saveImg1(url) {
    let that= this;
    //console.log(url);
    wx.getImageInfo({
      src: url,
      success: (res) => {
        let path = res.path;
        //这个方法不详细解释啦，上一篇写了
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: (res) => {
            app.globalData.$Toast({
              content: `保存成功`,
              type: 'success'
            })
          },
          fail: (res) => {
            console.log(res);
          }
        })
      },
      fail: (res) => {
        console.log(res);
      }
    })
  },
  //关闭图片预览
closeBiger(){
    let that =this;
    that.setData({
      bigImg:'',
      showBiger: false
    })
  },
  

至此，本功能就开发结束啦~希望对你有用！欢迎提供更好的解决方案，大噶共同进步呀！