小程序实现头像图片裁剪

微信小程序开发过程中，更换图片或者涉及上传图片，客户都会上传一些奇葩的尺寸，到时效果不理想，所以选择图片之后按自定尺寸裁剪再调用上传

效果预览

功能实现
1、上传图片的时候调起裁剪页面，裁剪后再回调完成上传;
2、图片裁剪直接用we-cropper   https://github.com/we-plugin/we-cropper
3、we-cropper使用详细方法参考博文  https://we-plugin.github.io/we-cropper/#/

一、上传页，具体按照自己项目，总的来时就是选择图片之后跳转裁剪页面，裁剪完再返回

chooseImage: function(e){
    var _this = this;
    wx.chooseImage({
      count: 1, 
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        var tempFilePaths = res.tempFilePaths[0];
        wx.navigateTo({
          url: '/pages/new/imgcorp?img='+tempFilePaths,   //注意是这里跳转裁剪页面
        });
      }
    })
  },
  uploadImage(path){
    var _this = this;
    wx.showLoading({
      title: '正在上传..',
    });
    wx.uploadFile({
      url: app.globalData.domain + 'user/uploadimage',
      filePath: path,
      name: 'file',
      formData: {
        'uid': app.globalData.userId
      },
      success: function (res) {
        var data = JSON.parse(res.data);  
        if (data.status == 0) {
          wx.showToast({
            title: data.err,
            duration: 2000
          });
          return false;
        }
        wx.hideLoading();
        _this.setData({
          imageurls: 'Uploads/' + data.urls,
          postimage: path
        });
      }
    })
  },

二、imgcorp.wxml

<import src="../we-cropper/we-cropper.wxml"/>
<template name="we-cropper">
    <canvas
            class="cropper  {{cutImage}}" 
            disable-scroll="true"
            bindtouchstart="touchStart"
            bindtouchmove="touchMove"
            bindtouchend="touchEnd"
            style="width:{{width}}px;height:{{height}}px;"
            canvas-id="{{id}}">
    </canvas>
</template>


<view class="cropper-wrapper {{cutImage}}">
    <template is="we-cropper"  data="{{...cropperOpt}}"/>
</view>
<view class="operbtns">  
  <button class="button" type="primary" bindtap="getCropperImage">完成</button> 
</view>

三、imgcorp.js

import WeCropper from '../we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight-46;  //底部留好完成按钮
Page({
  data: {
    cropperOpt: {
      id: 'cropper', // 用于手势操作的canvas组件标识符
      targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
      pixelRatio: device.pixelRatio, // 传入设备像素比
      width,  // 画布宽度
      height, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      cut: {
        x: (width - 200) / 2, 
        y: (width - 200) / 2,
        width: 200, // 裁剪框宽度
        height: 200 // 裁剪框高度
      }
    }

  },

  onLoad: function (options) {
    this.data.cropperOpt.src = options***g;
    const { cropperOpt } = this.data
    console.log(cropperOpt)
    this.mycropper = new WeCropper(cropperOpt)
      .on('beforeImageLoad', (ctx) => {
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      })
      .updateCanvas();
  },
  touchStart(e) {
    this.mycropper.touchStart(e)
  },
  touchMove(e) {
    this.mycropper.touchMove(e)
  },
  touchEnd(e) {
    this.mycropper.touchEnd(e)
  },
  getCropperImage() {
    var that = this;
    console.log(123);
    that.mycropper.getCropperImage((src) => {
      if (src != null) {
        console.log(src);
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];  //当前页面
        var prevPage = pages[pages.length - 2]; //上一个页面
        prevPage.uploadImage(src);
        wx.navigateBack();
      }
    })
  },
})