在WePY中实现“自定义裁剪组件”

we-cropper可以轻松地应用在WePY框架中，实现“自定义裁剪组件”

在WePY中，canvas-id不能通过变量赋值，具体原因请戳这里 ，目前可以在WePY模板中写死canvas-id，we-cropper的功能均能正常使用

安装we-cropper

npm install we-cropper --save

封装组件：components/wepy-com-cropper.wpy

<template>
  <canvas
    class="cropper"
    disable-scroll="true"
    @touchstart="ts"
    @touchmove="tm"
    @touchend="te"
    style="width:{{width}}px;height:{{height}}px;background-color: rgba(0, 0, 0, 0.8)"
    @error="canvasError"
    canvas-id="cropper">
  </canvas>
  <canvas
    class="cropper"
    disable-scroll="true"
    style="position: fixed; top: -{{width * pixelRatio}}px; left: -{{height * pixelRatio}}px; width:{{width * pixelRatio}}px;height:{{height * pixelRatio}}px;"
    canvas-id="targetCropper">
</template>

<script>
import wepy from 'wepy'
import WeCropper from 'we-cropper'

export default class Cropper extends wepy.component {
  data = {
    $: null,
    id: 'cropper',
    targetId: 'targetCropper'
  }

  props = {
    options: Object
  }

  computed = {
    width () {
      return this.options.width
    },
    height () {
      return this.options.height
    },
    pixelRatio () {
      return this.options.pixelRatio
    }
  }

  methods = {
    ts (e) {
      this.$.touchStart(e)
    },
    tm (e) {
      this.$.touchMove(e)
    },
    te (e) {
      this.$.touchEnd(e)
    },
    canvasError (e) {
      console.error(e.detail.errMsg)
    }
  }

    pushOrigin (src) {
      this.$.pushOrign(src)
    } 
    updateCanvas () {
      this.$.updateCanvas()
    }
    getCropperImage () {
      // we-cropper v1.3.0 之后 getCropperImage 方法返回 Promise 对象
      return this.$.getCropperImage()
    }
    getCropperBase64 (fn, ev) {
      this.$.getCropperImage(fn)
    }

  onLoad () {
    const options = this.options
    options.id = this.id
    options.targetId = this.targetId
    this.$ = new WeCropper(options)
    .on('ready', (...args) => {
      this.$emit('ready', ...args) 
    })
    .on('beforeImageLoad', (...args) => {
      this.$emit('beforeImageLoad', ...args)
    })
    .on('imageLoad', (...args) => {
      this.$emit('imageLoad', ...args)
    })
    .on('beforeDraw', (...args) => {
      this.$emit('beforeDraw', ...args)
    })
  }
}
</script>

<style>
</style>

在Page中使用组件

<template>
<view>
  <cropper :options="cropperOpt"
    @beforeImageLoad="bl"></cropper>
  <view class="cropper-buttons">
    <view
      class="upload"
      @tap="uploadTap">
      上传图片
    </view>
    <view
      class="getCropperImage"
      @tap="getCropperImage">
      生成图片
    </view>
  </view>
</view>
</template>

<script>
import wepy from 'wepy'
import Cropper from '@/components/wepy-com-cropper'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

export default class Index extends wepy.page {
  data = {
    cropperOpt: {
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: (width - 300) / 2,
          y: (height - 300) / 2,
          width: 300,
          height: 300
        }
      }
  }

  components = {
    cropper: Cropper
  }

  events = {
    ready () {
      console.log('we-cropper ready')
    },
    beforeImageLoad () {
      console.log('we-cropper beforeImageLoad')
    },
    imageLoad () {
      console.log('we-cropper imageLoad')
    },
    beforeDraw () {
      console.log('we-cropper beforeDraw')
    }
  }

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

            this.$invoke('cropper', 'pushOrigin', src)
          }
        })
      },
      getCropperImage () {
        this.$invoke('cropper', 'getCropperImage').then((src) => {
            wepy.previewImage({
              current: '', // 当前显示图片的http链接
              urls: [src] // 需要预览的图片http链接列表
            })
        }).catch(err => {
            console.log('获取图片地址失败，请稍后重试')
        })
      }
  }
}
</script>

<style lang="less">

</style>