vue-img-cropper
基于Vue2.0的移动端图片裁剪组件
Demo
Install
npm install vue-img-cropper -S
Example
Click Me
Vue { ... base64Data: null ... } methods: ... { thisbase64Data = data // or do other things such as upload const formData = const binary = const fileType = data01 const array = for let i = 0; i < binarylength; i += 1 array formData ... } ...
点击 <div class="cut-btn">Click Me</div>
会打开相册/相机;也可以调用组件的 getImg
方法来打开相册/相机
this$refscropper
Attribute
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
height | 可选,裁剪后图片的高度(单位px) | Number |
500 |
width | 可选,裁剪后图片的宽度(单位px) | Number |
500 |
maxSize | 可选,图片最大尺寸(单位:b) | Number |
Number.MAX_VALUE |
maxScale | 可选,图片最大的放大倍数 | Number |
4 |
compressionRatio | 可选,图片压缩比例,范围为:0~1 | Number |
0.92 |
footerHeight | 可选,裁剪页面底部栏的高度(单位px) | Number |
window.innerWidth * 0.1375 |
confirmBtnText | 可选,底部栏确认按钮文案 | String |
'选取' |
cancelBtnText | 可选,底部栏取消按钮文案 | String |
'取消' |
Event
事件名称 | 说明 | 回调参数 |
---|---|---|
cutImg | 确认裁剪时触发 | base64格式的图片数据 |
oversize | 图片体积超过maxSize 时触发 |
Object: { fileSize, maxSize } ;(fileSize、maxSize为 Number 类型的数据,单位:b) |
showLoading | 加载时触发 | -- |
hideLoading | 加载完成后触发 | -- |
showError | ErrorMsg, String |
'***' |
Slot
名称 | 说明 |
---|---|
(默认) | 触发打开相机/相册的按钮 |
更新日志
v1.4.3
- bug fix: 修复
confirmBtnText
、cancelBtnText
反了的问题
v1.4.1
- 优化文档
v1.4.0
- 增加属性:
confirmBtnText
、confirmBtnText
- 优化文档,增加 Demo 链接
v1.3.0
- 删除
exif-js
依赖 - 增加属性:
maxSize
- 增加事件:
oversize