微信小程序we-cropper.js的使用

<!-- 显示的照片 -->
<view class='toux'>
    <image mode='scaleToFill' class='toux1' src="{{img}}" bindtap='chooseimg'></image>
    <image mode='scaleToFill' class='toux2' src='../../images/toux/xiangji.png' bindtap='chooseimg'></image>
  </view>


<!-- 裁剪  -->
<view class='caijain' wx:if="{{xx}}">
  <!--start 用户自动截取正方形照片  -->
  
<!-- 裁剪区域   重要 -->
  <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 class='caijananniu'>
      <view class='cxuan' bindtap="chooseimg">重新选择</view>
      <view class='cxuan' bindtap="getCropperImage">确定</view>
    </view>
  </view>

  <!--end 用户自动截取正方形照片  -->
</view>

html页面主要是canvas的使用，没什么需要特别注意的地方

/**
*js中引入插件，很重要，别忘了
*/
import WeCropper from '../../dist/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 100;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    xx: false,
    cropperOpt: {  //基础设置 
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    },
    img: '../../images/toux/toux.png',
  },
  //选择图片
  chooseimg: function () {
    var that = this;
    wx.chooseImage({
      // sizeType: ['original', 'compressed'],
      // sourceType: ['type'],
      success: function (res) {
        console.log(res.tempFilePaths[0])
        that.setData({
          cutImage: 'show',
          addtribeConShow: 'hide',
          xx: true
        });
        that.wecropper.pushOrign(res.tempFilePaths[0]);
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    const {
      cropperOpt
    } = this.data
    new WeCropper(cropperOpt)
      .on('ready', (ctx) => { })
      .on('beforeImageLoad', (ctx) => {
        console.log(`before picture loaded, i can do something`)
        console.log(`current canvas context:`, ctx)
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        console.log(`picture loaded`)
        console.log(`current canvas context:`, ctx)
        wx.hideToast()
      })
      .on('beforeDraw', (ctx, instance) => {
        console.log(`before canvas draw,i can do something`)
        console.log(`current canvas context:`, ctx)
      })
      .updateCanvas();
  },
  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },
  getCropperImage() {
    var that = this;
    that.wecropper.getCropperImage((src) => {
      console.log(src)
      if (src) {
        //此处添加用户确定裁剪后执行的操作 src是截取到的图片路径
    	that.setData({
          xx: false,
          img: src,
        })
      }
    })
  }
  })

js文件就是插件一系列的滑动操作，基本没有什么需要修改的地方，直接用，简单，方便，快捷。

we-cropper.js下载

备注：完全不是原创，只是记录一下用过的插件，如有侵权，联系必删