微信小程序中图片自适应及双指缩放

时间：2024-10-22 11:13:30

预览

微信小程序实现对图片的缩放与裁剪

思路

  • 上传图片
  • 获取图片宽高等信息
  • bindtouchstart,bindtouchmove记录双指事件
  • 通过双指移动的距离与初始距离的关系判断缩放
  • 规定阈值，最大与最小缩放

开始操作

上传图片

由于上传的图片需要放大与缩小，所以我们首先要在style动态绑定width 和height，其次要设置overflow为scroll。
然后开始使用上传图片，代码如下：

 choose: function() {
    let that = this,
      width = that.data.width,
      height = that.data.height;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths[0];
        }
        )}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

获取图片信息

由于小程序无法操作DOM，我们获取图片信息不能像往常一样通过。在小程序中需要使用获取图片的相关信息。获取到上传的图片的宽高后，可以根据宽高的比列，实现特定条件下的自适应。

wx.getImageInfo({
          src: tempFilePaths,
          success: function(msg) {
            let img_w = msg.width,
              img_h = msg.height,
              scale = img_w / img_h
            //横向图片,宽不变
            if (scale > 1) {
              that.setData({
                width: width,   //宽度长，宽度不变
                height: height / scale,
                old_width: width,
                old_height: height / scale,
                img: tempFilePaths
              })
            } else { //纵向图片，保持高度不变
              that.setData({
                width: width * scale,
                height: height, //高度长，高度不变
                old_width: width * scale,
                old_height: height,
                img: tempFilePaths
              })
            }
          }
        })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

主要思路就是：长的那边设为固定，短的根据比例自适应

记录双指初始距离

使用小程序的bindtouchstart记录下双指的初始距离，由于双指无法在同一水平面上，需要使用勾股定理计算距离。((两指间的横向距离,2)+(两指间的纵向距离,2))

 start: function(res) {
    console.log(res)
    if (res.touches.length == 2) {
      let _x = res.touches[1].pageX - res.touches[0].pageX,
        _y = res.touches[1].pageY - res.touches[0].pageY,
        distance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));//实际距离
      this.setData({
        distance: distance
      })
    }
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

记录移动的距离

使用bindtouchmove记录两指的移动距离，如果大于初始距离，放大。如果小于初始距离，缩小。

 move: function(res) {
    if (res.touches.length == 2) {
      let _x = res.touches[1].pageX - res.touches[0].pageX,
        _y = res.touches[1].pageY - res.touches[0].pageY,
        newdistance = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2)),
        width = this.data.width,
        height = this.data.height,
        distance = this.data.distance,
        end_distance = newdistance - distance, //计算手指移动的距离
        pic_scale = 1 + end_distance * 0.002; //0.002是为了使图片放大和缩小时的平缓，不突兀
      this.setData({
        width: width * pic_scale,
        height: height * pic_scale
      })
    }
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

规定阈值

把图片的缩放控制在可接受范围内,最大放大2倍

 let max = this.data.width / this.data.old_width;
      if (max > 2) {
        this.setData({
          width: old_width * 2,
          height: old_height * 2
        })
      } else if (max < 1) {
        this.setData({
          width: old_width,
          height: old_height
        })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

好了，图片的缩放已经可以实现了。我们可以结合上一篇中提到的canvas裁剪图片，实现对图片的截取，用作背景图或者头像。下一篇见。

相关文章