微信小程序：上传头像并裁剪功能相关代码

首先从相册或者拍照选择图片
js代码：

//点击上传头像方法
  showAction() {
   
    let that = this
    wx.showActionSheet({
   
      itemList: ['从相册中选择', '拍照'],
      success: function(res) {
   
        if (!res.cancel) {
   
          console.log(res.tapIndex)
          if (res.tapIndex == 0) {
   
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
   
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },
  chooseWxImage: function(type) {
   
    var that = this;
    wx.chooseImage({
   
      count:1,
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function(res) {
   
        console.log(res);
        // that.setData({
   
        //   // tempFile   ath可以作为img标签的src属性显示图片
        //   avatar: res.tempFilePaths[0],
        // })
        var tempFilePaths = res.tempFilePaths;
        wx.navigateTo({
   
          url: "/pages/avatarCut/index?src=" + tempFilePaths
        });
      }
    })
  },

然后新建一个页面，放置画布等，对裁剪图片进行操作
这个地方需要引入一个组件，当如小程序文件中的components文件夹里就可以，文章尾部会有放置下载地址

html代码：

//引入的组件
<import src="../../components/we-cropper/we-cropper.wxml"/>
<view class="cropper-wrapper">
  <template is="we-cropper" data="{
   {...cropperOpt}}"/>
  <view class="cropper-buttons">
    <canvas canvas-id='attendCanvasId' class='myCanvas' style