移动端裁剪插件
移动端裁剪插件,原生 JavaScript 实现,无依赖,支持 Vue 2.0,React。
Demo
安装
Install with npm: npm install xcrop --save
直接使用
const options = {}const crop = optionscropcrop{var file = etargetfiles0if !file return falsecropthisvalue = ''}documentonchange = onChange
基于 Vue 2.0 使用
{returnfile: nulloptions: {}output: ''}methods:{thisfile = etargetfiles0}{thisfile = nullcrop}{thisoutput = cropthisfile = nullcrop}{console}components:Crop
基于 React 使用
{ superprops thisstate = options: {} output: '' thisonChange = thisonChange thisonCancle = thisonCancle thisonConfirm = thisonConfirm thisonError = thisonError } { thiscrop0 } { crop } { this crop } { console } { return <div className="App"> <input type="file" onChange=thisonChange accept="image/*" value="" /> thisstateoutput && <img src=thisstateoutput width="100%" alt="" /> <Crop ref= thiscrop = component || null options=thisstateoptions onCancle=thisonCancle onConfirm=thisonConfirm onError=thisonError /> </div> }
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+