Vue移动端裁剪组件
基于Vue 1.x & 2.x实现的移动端裁剪组件
效果:gif
demo
安装
Install with npm: npm install vue-xcrop --save
使用
// 上面的引入方式报错的话用这个:// import Crop from 'vue-xcrop/dist/vuecrop'={returnfile: ''}methods:{thisfile = etargetfiles0}{thisclear}{const result = crop// result: { canvas: canvas }thisclear}{thisfile = ''}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: documenttarget: document
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
事件
methods: { } { } ... components: Crop
crop 实例方法
get
Type: Function
/*** 裁剪函数,根据裁剪参数,输出裁剪后的图片* @param* @property* @property* @property* @property* @property* @return*/var options =width: 300height: 300type: 'image/jpeg'quality: 085this返回结果为以下对象中的一个:// 文件对象blob: Blob// canvas elementcanvas: canvas// base64src: 'data:image/jpeg;base64,/xxxx'// objectUrlurl: '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.