微信小程序剪切头像

使用开源插件：git地址
直接将上述项目中的example目录下 把we-cropper文件夹赋值到自己的项目中调用即可。
实现剪切的功能需用两个页面，一个用于展示，一个用于剪切
第一个页面userInfo：
wxml：

		<tui-list-cell padding="0" arrow="{{true}}">
			<view class="tui-list-cell" bindtap="chooseImage">
				<view>头像</view>

				<image src="{{user.headPortrait != null?user.headPortrait:'/static/images/my/mine_def_touxiang_3x.png'}}" class="avatar"></image>
			</view>
		</tui-list-cell>

wxss:

.avatar{
		width: 100rpx;
		height: 100rpx;
    background-color: #e5e5e5;
    border-radius: 50%;
}

js:

  onLoad: function(options) {
    console.log("===剪切后==")
    this.getUserInfo();
  },
  chooseImage: function (e) {
    console.log("事件==：",e)
    let that = this;
    let req = new Request();
    let aa = req.url;
    console.log("查看地址：",aa)
    if (that.data.files.length >= 1) {
      util.toast("最多上传1张图片");
      return
    }
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        const src = res.tempFilePaths[0]
        console.log("查看=：",src)
        wx.redirectTo({
          url: '../shear/shear?src='+src
        })

        }
    })
  },
  /**
   * 取得用户信息
   */
  getUserInfo: function() {
    let req = new Request();
    req.method = "/sys/user/info";

    req.success = (res) => {
      wx.setStorageSync("head_portrait", res.user.headPortrait);
      this.setData({
        user: res.user
      })
    }
    req.request();
  }

另一个页面：
wxml:

<import src="../../we-cropper/dist/weCropper.wxml" />

<view class="cropper-wrapper">
  <template is="weCropper" data="{{...cropperOpt}}" />
  <view class="cropper-buttons" style="margin-bottom: 5%">
    <button bindtap="uploadTap"  class="tui-btn  tui-primary tui-fillet bi-buttons" hover-class="tui-primary-hover">重新选择</button>
    <button bindtap="getCropperImage" class="tui-btn  tui-primary tui-fillet bi-buttons" hover-class="tui-primary-hover">保存</button>

  </view>
</view>

wxss:

@import "../../we-cropper/style/common.wxss";
@import '../../static/style/thorui.wxss';
.cropper {
  position: absolute;
  top: 0;
  left: 0;
}

.cropper-buttons {

  background-color: #fff;
  color: #04b00f;
}
.bi-buttons {
font-size: 30rpx;
 width: 30%;
 height: 60%;
 text-align: center;
 display: table-cell;
 vertical-align: middle;
}

js:

import weCropper from '../../we-cropper/dist/weCropper.js'
import Request from "../../network/request";

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Page({
  data: {
    files:[],
    filePath:'',
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
  },
  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },

  getCropperImage() {
    this.wecropper.getCropperImage((avatar) => {
      let that = this;
      let req = new Request();
      let aa = req.url;
      console.log("===剪切后的图片：",avatar)
      if (avatar) {
        //  获取到裁剪后的图片

          //上传功能
          wx.uploadFile({
            url: aa+'dWork/ossUpload',
            filePath: avatar,
            name: 'file',
            header:{
              'cookie': wx.getStorageSync("sessionid")
            },
            formData: {
              'fileName':'head_portrait'
            },
            success (res){
              const data = res.data
              console.log("=====333====",data)
              that.setData({
                filePath:data
              })
              console.log("拼接后："+that.data.filePath)
              that.editUserInfo()
              //do something
            },
            fail:function(e){
              console.log("fail:",e);
            }
          })


      } else {
        console.log('获取图片失败，请稍后重试')
      }
    })
  },
  uploadTap() {
    const self = this

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        let src = res.tempFilePaths[0]
        //  获取裁剪图片资源后，给data添加src属性及其值

        self.wecropper.pushOrign(src)
      }
    })
  },
  //更新用户信息
  editUserInfo: function() {
    console.log("==更新用户信息========：")
    let req = new Request();
    req.method = "/sys/user/editImage";
    req.params = {
      headPortrait:this.data.filePath
    }
    req.success = (res) => {
      console.log("==查看更新用户信息：",res)
      //this.getUserInfo()
      wx.redirectTo({
        url: '../userInfo/userInfo'
      })
    }
    req.request();
  },
  onLoad(option) {
    // do something
    const {
      cropperOpt
    } = this.data
    const {
      src
    } = option
    if (src) {
      Object.assign(cropperOpt, {
        src
      })

      new weCropper(cropperOpt)
        .on('ready', function(ctx) {})
        .on('beforeImageLoad', (ctx) => {
          wx.showToast({
            title: '上传中',
            icon: 'loading',
            duration: 3000
          })
        })
        .on('imageLoad', (ctx) => {
          wx.hideToast()
        })
    }
  }
})