微信小程序实现图片裁剪上传（wepy）

参考https://github.com/we-plugin/we-cropper,在wepy中实现，参考的具体例子是we-cropper/example/cutInside/

项目上传图片时2:3的图片

实现代码如下：

wxss代码：

<style lang="less">
  .cropperBox{
    background: #fff;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100rpx;
    z-index: 10;

    .cropper-wrapper{
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      background-color: #e5e5e5;
    }

    .cropper-buttons{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
    }

    .cropper-buttons .upload, .cropper-buttons .getCropperImage{
      width: 50%;
      text-align: center;
    }
    .cropper{
      position: absolute;
      top: 0;
      left: 0;
    }

    .cropper-buttons{
      background-color: rgba(0, 0, 0, 0.95);
      color: #04b00f;
    }
  }
</style>

 wxml代码（主要修改是将canvas直接写入，而不是使用组件引入，使用例子中组件方式引入会使得canvas的各种功能不起作用）：

<view class="cropperBox">
  <view class="cropper-wrapper">
    <canvas
      class="cropper"
      disable-scroll="true"
      bindtouchstart="touchStart"
      bindtouchmove="touchMove"
      bindtouchend="touchEnd"
      style="width:{{width}}px;height:{{height}}px;font-weight:bold;">      canvas-id="cropper">
    </canvas>
    <view class="cropper-buttons">
      <view
        class="upload"
        bindtap="uploadTap">
        重新上传
      </view>
      <view
        class="getCropperImage"
        bindtap="getCropperImage">
        确认
      </view>
    </view>
  </view>
</view>

js代码(对例子中的代码稍微进行了改动)：

import wepy from 'wepy'
import WeCropper from '@/src/we-cropper.js' // 文件在we-cropper/example/we-cropper/we-cropper.js

const device = wepy.getSystemInfoSync()
  const width = device.windowWidth
  const height = device.windowHeight - 50
  export default class cropper extends wepy.page {
    config = {
      navigationBarTitleText: ''
    }
    components = {

    }
    
    data = {
      oimg: '',
      width,
      height,
      wecropper: null,
      cropperOpt: {
        id: 'cropper',
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {   // 实现2:3比例
          x: (width - 200) / 2,
          y: (height - 300) / 2,
          width: 200,
          height: 300
        }
      }
    }
    computed = {}
    methods = {
      touchStart (e) {
        this.wecropper.touchStart(e)
      },
      touchMove (e) {
        this.wecropper.touchMove(e)
      },
      touchEnd (e) {
        this.wecropper.touchEnd(e)
      },
      getCropperImage () {
        this.wecropper.getCropperImage((src) => {
          if (src) {
            // 上传图片逻辑
          } else {
            console.log('获取图片地址失败，请稍后重试')
          }
        })
      },
      uploadTap () {
        const self = this

        wepy.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success (res) {
            const src = res.tempFilePaths[0]
            //  获取裁剪图片资源后，给data添加src属性及其值
            self.wecropper.pushOrign(src)
          }
        })
      }
    }
    onLoad(option) {
      // this.oimg = option.img // 获得需要裁剪的图片(上一个页面选择图片，然后跳转到本页面裁剪，裁剪完上传后，可以保存在全局上getApp().globalData.testimg = 上传的图，其他页面便可以得到裁剪后并上传的图)

      // this.cropperOpt.src = this.oimg
      let wecropper = new WeCropper(this.cropperOpt)
        .on('ready', (ctx) => {
        })
        .on('beforeImageLoad', (ctx) => {
          wepy.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 20000
          })
        })
        .on('imageLoad', (ctx) => {
          wepy.hideToast()
        })
        .on('beforeDraw', (ctx, instance) => {
        })
        .updateCanvas()
      this.wecropper = wecropper
    }
  }