移动端裁剪插件

移动端裁剪插件，原生 JavaScript 实现，无依赖，支持 Vue 2.0，React。

Demo

Demo

安装

Install with npm: npm install xcrop --save

直接使用

1<input type="file" id="file-input" accept="image/*">

1import Crop from 'xcrop'
2
3const options = {}
4const crop = new Crop(options)
5
6crop.on('cancle', crop => {
7  crop.hide()
8})
9crop.on('confirm', crop => {
10  const canvas = crop.get({ format: 'canvas' })
11  document.body.appendChild(canvas)
12  crop.hide()
13})
14
15function onChange (e) {
16  var file = e.target.files[0]
17  if (!file) return false
18  crop.load(file)
19  this.value = ''
20}
21
22document.getElementById('file-input').onchange = onChange

基于 Vue 2.0 使用

1<Crop
2  :file="file"
3  :options="options"
4  @on-cancle="onCancle"
5  @on-confirm="onConfirm"
6  @on-error="onError"
7/>
8<input type="file" @change="onChange($event)" accept="image/*" :value="''">
9<img v-if="output" :src="output" width="100%">

1import Crop from 'xcrop/src/components/VueCrop'
2
3export default {
4  data () {
5    return {
6      file: null,
7      options: {},
8      output: ''
9    }
10  },
11  methods: {
12    onChange (e) {
13      this.file = e.target.files[0]
14    },
15    onCancle (crop) {
16      this.file = null
17      crop.hide()
18    },
19    onConfirm (crop) {
20      this.output = crop.get()
21      this.file = null
22      crop.hide()
23    },
24    onError (error) {
25      console.log(error)
26    }
27  },
28  components: {
29    Crop
30  }
31}

基于 React 使用

1import React, { Component } from 'react'
2import Crop from 'xcrop/src/components/ReactCrop'
3
4export default class App extends Component {
5
6  constructor (props) {
7    super(props)
8
9    this.state = {
10      options: {},
11      output: ''
12    }
13
14    this.onChange = this.onChange.bind(this)
15    this.onCancle = this.onCancle.bind(this)
16    this.onConfirm = this.onConfirm.bind(this)
17    this.onError = this.onError.bind(this)
18  }
19
20  onChange (e) {
21    this.crop[0].load(e.target.files[0])
22  }
23
24  onCancle (crop) {
25    crop.hide()
26  }
27
28  onConfirm (crop) {
29    this.setState({
30      output: crop.get()
31    })
32    crop.hide()
33  }
34
35  onError (error) {
36    console.log(error)
37  }
38
39  render () {
40    return (
41      <div className="App">
42        <input type="file" onChange={this.onChange} accept="image/*" value="" />
43
44        {this.state.output && <img src={this.state.output} width="100%" alt="" />}
45
46        <Crop
47          ref={component => this.crop = component || null}
48          options={this.state.options}
49          onCancle={this.onCancle}
50          onConfirm={this.onConfirm}
51          onError={this.onError}
52        />
53      </div>
54    )
55  }
56}
57

Options

Type: Object

实例化选项：new Crop(options)

参数	必选	类型	默认	说明
el	false	Element	body	插入节点
viewWidth	false	Number	document.documentElement.clientWidth	容器宽度
viewHeight	false	Number	document.documentElement.clientHeight	容器高度
border	false	Object	{x,y,width,height}	裁剪框位置大小，默认居中，为容器90%大小
circle	false	Boolean	false	裁剪框是否为圆形，仅样式改变，裁剪后输出的图片依然是矩形，不支持安卓<=4.1的版本
maxScale	false	Number	2	允许缩放的最大比例
confirmText	false	String	确认	确认按钮文字
cancleText	false	String	取消	取消按钮文字
beforeShowClass	false	String	crop_slide-to-left	显示的动画类名，会在显示之前添加，之后移除，可选：crop-slide-to*, *: left/right/top/bottom
beforeHideClass	false	String	crop_slide-to-bottom	隐藏的动画类名，会在隐藏之前添加，参数同上

实例方法

load(target)

加载图片

参数	必选	类型	默认	说明
target	true	String/File/Element	-	图片目标，可以是flile/base64/imageElement/objectUrl/canvas

get(options)

获取裁剪图片

options 属性	必选	类型	默认	说明
width	false	Number	默认宽度基于原图比例	裁剪宽度
height	false	Number	默认高度基于原图比例	裁剪高度
type	false	String	image/jpeg	图片格式
format	false	String	base64	输出格式，可选：canvas/objectUrl/base64/file
quality	false	Number	0.85	图片质量，对应canvas toDataURL方法

返回值	类型	说明
result	String/Element/File	返回结果，根据输入选项返回对应结果

show / hide

显示/隐藏组件

参数	必选	类型	默认	说明
transition	false	Boolean	true	是否需要过渡动画

setBorder

设置裁剪框位置大小：setBorder(border)

参数	必选	类型	默认	说明
border	true	Object	-	裁剪框大小：{x, y, width, height}

on

监听自定义事件，函数返回自身，可以链式调用，

参数	必选	类型	默认	说明
eventName	true	String	-	事件名
fn	true	Function	-	事件函数
once	false	Boolean	undefined	此事件是否只执行一次

可监听的事件有：

事件名	说明
loaded	图片加载完成
error	图片加载失败
cancle	按钮取消
confirm	按钮确认
dragstart	单指按下
dragmove	单指拖动
dragend	单指拖动结束
pinchstart	双指按下
pinchmove	双指拖动
pinchend	双指拖动结束

emit

分发自定义事件

参数	必选	类型	默认	说明
eventName	true	String	-	事件名
arguments	false	*	-	携带的参数

off

移除自定义事件

参数	必选	类型	默认	说明
eventName	true	String	-	事件名
fn	true	Function	-	移除的函数

this.canvas.moveTo

移动图片到指定位置

参数	必选	类型	默认	说明
x	true	Number	-	x坐标
y	true	Number	-	y坐标

this.canvas.sacleTo

缩放图片

参数	必选	类型	默认	说明
point	true	Object	-	以点为中心缩放：{x:0, y:0}
scale	true	Number	-	缩放比例

destroy

销毁组件

静态方法

Crop.imageToCanvas

图片转canvas

参数	必选	类型	默认	说明
target	true	string/file/element	-	图片
callback	true	Function	-	成功回调，回调函数中第一个参数为canvas
options	false	Object	{orientation: true, errorCallback: function () {}}	可选项，orientation：是否需要更正图片方向，errorCallback： 出错回调

Browser support

Android 4.2+, iOS 8+