微信小程序實現圖片裁剪上傳（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
    }
  }