vue-xcrop/src/components/crop.js

A simple mobile image cropper for Vue 1/2

import { extend } from '../util'
import Crop from 'xcrop'

const props = {
  target: {
    type: null,
    required: true
  },
  options: {
    type: Object,
    default: () => {
      return {
        maxTargetWidth: 2000,
        maxTargetHeight: 2000,
        width: 300,
        height: 300,
        x: undefined,
        y: undefined,
        maxScale: 2,
        canvasScale: 2,
        touchTarget: null
      }
    }
  },
  autoClose: {
    type: Boolean,
    default: true
  }
}

const CropComponent = {
  name: 'crop',
  props,
  template: `<div class="vue-crop-component" style="width: 0; height: 0;"></div>`,
  watch: {
    target (target) {
      this.load()
    }
  },
  ready () {
    this.init()
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const vm = this
      const options = extend(vm.options, {
        el: vm.$el,
        cancle: function () {
          vm.$emit('on-cancle')
          vm.autoClose && vm._crop.hide()
        },
        confirm: function () {
          vm.$emit('on-confirm', vm._crop)
          vm.autoClose && vm._crop.hide()
        },
        loaded: function () {
          vm.$emit('on-loaded', vm._crop)
          vm._crop.show()
        },
        mounted: function () {
          vm.$emit('on-mounted', vm._crop)
          vm.addTouchEvents()
        }
      })
      vm._crop = new Crop(options)
    },
    load () {
      if (this.target && this._crop) {
        this._crop.load(this.target)
      }
    },
    addTouchEvents () {
      const vm = this
      const events = ['dragstart', 'dragmove', 'dragend', 'pinchstart', 'pinchmove', 'pinchend']
      events.forEach(eventName => {
        vm._crop.pinch.on(eventName, function (e) {
          vm.$emit(`on-${eventName}`, e)
        })
      })
    }
  },
  beforeDestroy () {
    this._crop && this._crop.destroy()
    this._crop = null
  }
}

export default CropComponent