Vue移动端裁剪组件

基于Vue 1.x & 2.x实现的移动端裁剪组件

效果：gif

demo

安装

Install with npm: npm install vue-xcrop --save

使用

<div id="app">
  <input type="file" @change="onChange($event)" accept="image/*" :value="''">
  <crop :target="file" @on-cancle="onCancle" @on-confirm="onConfirm"></crop>
</div>

import Crop from 'vue-xcrop'
// 上面的引入方式报错的话用这个：
// import Crop from 'vue-xcrop/dist/vuecrop'

export default = {
  data () {
    return {
      file: ''
    }
  },
  methods: {
    onChange (e) {
      this.file = e.target.files[0]
    },
    onCancle () {
      this.clear()
    },
    onConfirm (crop) {
      const result = crop.get({width: 600})
      // result: { canvas: canvas }
      this.clear()
    },
    clear () {
      this.file = ''
    }
  },
  components: {
    Crop
  }
}

组件参数

target

裁剪图片目标，可以是imageUrl、base64Image、imageElement、objectUrl和canvas

Type: String, Element or File

target: 'http://xxx.jpg'
target: 'data:image/jpeg;base64,xxxxxx'
target: 'blob:http://localhost/24dfe01f-d581-4618-b595-f179cadc4e2f'
target: document.getElementById('image')
target: document.getElementById('canvas')

options

裁剪选项

Type: Object
Default:

{
  // 裁剪的图片宽度超出2000px，将会缩放成2000px
  maxTargetWidth: 2000,
  // 裁剪的图片高度超出2000px，将会缩放成2000px
  maxTargetHeight: 2000,
  // 裁剪框的宽度
  width: 300,
  // 裁剪框的高度
  height: 300,
  // 裁剪框的x坐标
  x: undefined,
  // 裁剪框的y坐标
  y: undefined,
  // 图片可缩放最大比例
  maxScale: 2,
  // 默认canvas大小为裁剪组件的2倍
  canvasScale: 2
}

autoClose

点击取消确认按钮后是否自动隐藏组件

Type: Boolean
Default: true

事件

<crop
  @on-dragstart="onDragstart"
  @on-dragmove="onDragmove"
  @on-dragend="onDragend"
  @on-pinchstart="pinchstart"
  @on-pinchmove="pinchmove"
  @on-pinchend="pinchend"
>
</crop>

import Crop from 'vue-xcrop'

export default {
  methods: {
    onDragstart (e) {
    },
    onDragmove (e) {
    },
    ...
  },
  components: {
    Crop
  }
}

crop 实例方法

get

Type: Function

/**
 * 裁剪函数，根据裁剪参数，输出裁剪后的图片
 * @param {object} options
 * @property {number} options.width - 裁剪宽度，默认值为裁剪框的width
 * @property {number} options.height - 裁剪高度，默认值为裁剪框的height
 * @property {string} options.type - 图片类型，默认'image/jpeg'
 * @property {number} options.quality - 图片质量，默认0.85，取值区间0~1
 * @property {string} options.format - 裁剪图片的格式，影响最终返回的结果，默认 'canvas'， 可选：canvas、src、blob、url
 * @return {object} 裁剪后的图片数据
 */
 
var options = {
 width: 300, 
 height: 300, 
 type: 'image/jpeg', 
 quality: 0.85
}
this.get(options)

返回结果为以下对象中的一个：
{
  // 文件对象
  blob: Blob,
  // canvas element
  canvas: canvas,
  // base64
  src: 'data:image/jpeg;base64,/xxxx',
  // objectUrl
  url: 'blob:http://localhost/24dfe01f-d581-4618-b595-f179cadc4e2f'
}

Browser support

Android 4+, iOS 8+

License

vue-xcrop is released under the MIT License. Have at it.