小程序图片放大预览效果的实现

点击图片放大

<image bindlongpress="saveImage" bindtap="previewImage" data-width="{{item.payload.imageInfoArray[0].width}}" data-height="{{item.payload.imageInfoArray[0].height}}" data-index="{{index}}" src="{{item.payload.imageInfoArray[0].imageUrl}}"></image>

承接图片放大的模块
小程序竖屏的可直接使用小程序自带的图片放大事件；横盘的话就需要自己写（自带的不适应）

<view class='lookPiture' style="z-index:10;position:absolute;height:100vh" wx:if="{{pictureUrl.length!=0}}">
  <view class='top' style="height:39px;">
      <view class="goback">
        <image src="{{image}}goback.png" bindtap="gobackdetail"></image>
      </view>
    </view>
  <!-- <view style="{{bigStyle}}">+</view><view style="{{littleStyle}}">-</view> -->
  <scroll-view scroll-y='true' scroll-x='true' style="text-align: center;width:100vw;height:99vh;margin-top:-11.5vh" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
    <image data-url="{{pictureUrl}}" src="{{pictureUrl}}" style="{{pictureUrlStyle}}" bindload="imgload"></image>
  </scroll-view>
</view>

wx.previewImage({  //小程序自带的放大图片事件
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

 // -------- 点击图片放大 保存 -------
  previewImage: function (e) {
    console.log(e.target.dataset.index)
    let index = e.target.dataset.index;
    var width = e.target.dataset.width;
    var height = e.target.dataset.height;
    var list = this.data.testMessageDetail;
    var pictureH = '';
    var pictureW = '';
    var top = '';
    if(height>this.data.windowHeight){
      pictureH = this.data.windowHeight * 0.98;
      pictureW = width/height*(this.data.windowHeight*0.98);
      top = 0
    }else{
      pictureW = this.data.windowWidth * 0.6
      pictureH = this.data.windowWidth * 0.6 * height / width;
      top = (this.data.windowHeight - this.data.windowWidth * 0.6 * height / width) / 2
    }
    var style = "width:"+pictureW+"px;height:" + pictureH +"px;margin-top:"+top+"px"
    var url = '';
    if(this.data.pictureUrl==''){
      url = list[index].payload.imageInfoArray[0].imageUrl;
    }else{
      url = ''
    }
    this.setData({
      pictureUrl: url,
      pictureUrlStyle: style,
      pictureW: pictureW,
      pictureH: pictureH
      // toView: 'msg-' + (e.target.dataset.index),
    })
  },
  /**
  * 监听图片加载成功时触发
  */
  imgload: function (e) {
    this.setData({
      'baseWidth': e.detail.width, //获取图片真实宽度
      'baseHeight': e.detail.height, //获取图片真实高度
    })
  },

双指放大缩小图片

/**
   * 双手指触发开始 计算开始触发两个手指坐标的距离
   */
  touchstartCallback: function (e) {
    // 单手指缩放开始，不做任何处理
    if (e.touches.length == 1){
      // this.previewImage(e);
      return;
    }else{
      // 当两根手指放上去的时候，将距离(distance)初始化。
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      //计算开始触发两个手指坐标的距离
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);
      this.setData({
        'distance': distance,
      })
    }
  },
  /**
   * 双手指移动   计算两个手指坐标和距离
   */
  touchmoveCallback: function (e) {
    // 单手指缩放不做任何操作
    if (e.touches.length == 1) {
      // this.previewImage(e);
      return;
    }else{
      //双手指运动 x移动后的坐标和y移动后的坐标
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      //双手指运动新的 ditance
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);
      //计算移动的过程中实际移动了多少的距离
      let distanceDiff = distance - this.data.distance;
      let newScale = this.data.scale + 0.005 * distanceDiff
      console.log('newScale',newScale)
      // 为了防止缩放得太大，所以scale需要限制，同理最小值也是
      if (newScale >= 2) {
        newScale = 2
      }
      //为了防止缩放得太小，所以scale需要限制
      if (newScale <= 0.3) {
        newScale = 0.3
      }
      let scaleWidth = newScale * this.data.pictureW
      let scaleHeight = newScale * this.data.pictureH
      var top = ''
      if (scaleHeight < this.data.windowHeight) {
        top = (this.data.windowHeight - scaleHeight) / 2
      } else {
        top = 0
      }
      var style = "width:" + scaleWidth + "px;height:" + scaleHeight + "px;margin-top:" + top + "px"
      this.setData({
        'distance': distance,
        'scale': newScale,
        'pictureUrlStyle': style,
        'diff': distanceDiff
      })
    }
  },

小图

放大效果图