微信小程序-将图片裁剪成规定的尺寸

需求：

图片上传时，要求必须是720*720大小的图片，但是用camera拍出来的照片大小不固定，有的手机是720*720，有的就是1080*1080，还有480*480的

解决办法：

将图片转换成canvas，再在canvas中操作，最后将canvas转换图片导出

先大概贴一下html代码和js中的data

  <view style='height:292px;width:292px;'>
    <camera wx:if="{{complated!=true}}" device-position="front" flash="off" class='face-image'></camera>
    <!-- 给用户展现的图片 -->
    <image wx:if="{{complated==true}}" class='face-image' src='{{faceUrl}}'></image>
    <!-- 辅助裁剪的canvas，不显示给用户，因为720太大，界面放不下 -->
    <canvas canvas-id='image-canvas' style='width:720px;height:720px;position:fixed;top:-10000px;left:-10000px;'></canvas>
  </view>

data: {
   complated: false,   // 拍照是否完成
   faceUrl: ''         // 图片的临时路径
},

重点来了~

1.拍照

(检查拍到的图片大小是否是720*720，是的话，不用处理，如果不是，就调用我们自己写的图片处理函数loadTempImagePath进行处理)

const ctx = wx.createCameraContext()
// 拍照
ctx.takePhoto({
   quality: 'normal',
   success: (res) => {
     var tempImagePath = res.tempImagePath;   // 拍的照片的临时地址
      // 获取图片详情
      wx.getImageInfo({
            src: tempImagePath,
            success: res => {
              // 检查图片宽高等于720
              if (res.width == 720 && res.height == 720) {
                that.setData({
                  complated: true, 
                  faceUrl: tempImagePath
                })
                return;
              }else{
                that.loadTempImagePath(tempImagePath)
              }
            },
            fail: fail => {
              console.log('获取拍照信息失败了')
              that.loadTempImagePath(tempImagePath)
            }
          })
        }
      })

2.图片处理函数loadTempImagePath

// 参数options是拍照获取到的临时路径
loadTempImagePath(options) {
    var that = this;

    // 矩形的位置 (设置了要求的大小:720)
    var image_x = 0;
    var image_y = 0;
    var image_width = 720;
    var image_height = 720;
        
    //过渡页面中，图片的路径坐标和大小
    var canvas = wx.createCanvasContext("image-canvas")
    canvas.drawImage(options, 0, 0, image_width, image_height)
    wx.showLoading({
      title: '数据处理中...',
      icon: 'loading',
      mask: true,
      duration: 10000
    })

    // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定
    canvas.strokeStyle = '#f4f8f9';
    canvas.strokeRect(image_x, image_y, image_width, image_height)
    canvas.draw(
      true, 
      function(){
        wx.canvasToTempFilePath({ //裁剪对参数
          canvasId: "image-canvas",
          // x: image_x, //画布x轴起点
          // y: image_y, //画布y轴起点
          // width: image_width, //画布宽度
          // height: image_height, //画布高度
          // destWidth: image_width, //输出图片宽度
          // destHeight: image_height, //输出图片高度
          success: function (res) {
            console.log('图片处理成功了',res)
            that.setData({
              complated: true, 
              faceUrl: res.tempFilePath
            })
            wx.hideLoading()
          },
          fail: function (e) {
            wx.hideLoading()
            wx.showToast({
              title: '出错啦...',
              icon: 'loading'
            })
          }
        })
      }
    )
  },