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

预览

老规矩，先上预览:

---

思路

• 实现图片的缩放

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

• 实现对图片的裁剪

  • canvas.drawImage 对图片进行绘制
  • wx.canvasToTempFilePath 实现对绘制图片的裁剪
  • 取消，清空参数

---

开始操作

• 上传图片

  在上传图片之前，我们需要获取设备的宽高，使图片可以自适应屏幕的大小。使用 wx.gerSystemInfo 获取，规定一个 screenW = screenWidth 用于后续参考。
  然后可以 wx.chooseImage 对图片进行上传。

• 获取图片信息，实现自适应

  小程序无法操作 DOM ，但是我们可以通过操作 data 值的方法得到所需参数。
  首先使用 wx.getImageInfo 得到上传图片的宽高，其次计算宽高的比列 scale。

  1. 如果 宽 / 高 大于 1 ，则是一幅横向图 ，我们需要让短的一边 高 填满整个裁剪框 screenW ,宽度根据比例自适应。
  2. 相反，如果 宽 / 高 小于 1 ，则是一幅纵向图，让短边 宽 填满，高度自适应即可。

   wx.getImageInfo({
       
       
                   src: tempFilePaths,  //图片地址
                   success: function(msg) {
       
       
                       let img_w = msg.width, 
                           img_h = msg.height,
                           scale = img_w / img_h    //宽高比scale
                       //横向图片,宽不变
                       //横向图片，高变成固定，宽度自适应
                       if (scale > 1) {
       
       
                           that.setData({
       
       
                               width: scale * width,
                               height: height,
                               old_width: scale * width,  //记录原始宽高，为缩放比列做限制
                               old_height: height,
                               img: tempFilePaths
                           })
                       } else {
       
        //纵向图片，短边是宽，宽变成系统固定，高自适应
                           that.setData({
       
       
                               width: width,
                               height: height / scale,
                               old_width: width,
                               old_height: height / scale,
                               img: tempFilePaths
                           })
                       }