# vue-img-clipping
简单易用的vue图片裁剪插件,支持旋转、缩放、平移,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求
### 更新说明:
2021-09-09
- 新增圆形截取框, 设置为圆形取景框后,截取出图片可以设置为圆形或方形,若是设置比例咋不生效
### 特色:
- 兼容IE9+,MSEdge,Chrome,Firefox - 两种展现形式,行内或弹窗 - 可旋转、缩放图片 - 任意比例、大小裁剪 - 固定比例、大小裁剪 - 支持远程图片裁剪、跨域设置 ### 插件截图:
### 使用方法:
1. 安装
npm install vue-img-clipping --save-dev
2. 将ImgCutter.vue文件引入项目:
import ImgClipping from 'vue-img-clipping'
export default {
components:{
ImgClipping
},
...
}
3. 在页面中使用:
<ImgClipping v-on:cutDown="cutDown"></ImgClipping>
4. 可使用solt
<ImgClipping v-on:cutDown="cutDown">
<button slot="open">选择图片</button>
</ImgClipping>
5. 远程、跨域裁剪(兼容IE9)
需要自己写一个方法来触发裁剪工具弹出在方法中先将图片上传至服务器,拿到返回的url后创建一个obj,然后将对象传入裁剪工具2.1.9版本后只需要传入图片url和图片名称
// 传入的obj必须包含这四个属性
let obj = {
name:'1.jpg',//远程图片名称
src:'http://url/1.jpg',//远程图片url
//width:200,//远程图片的原始宽度 2.1.9版本后不需要
//height:200,//远程图片的原始高度 2.1.9版本后不需要
}
forIe9:function(){
// 传入name,src name中必须包含后缀名
this.$refs.imgCutterModal.handleOpen({
name:"image.jpg",
src:"http://imageServ.com/image.jpg",
});
}
### 参数说明:
属性名 | 作用 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|---|
viewfinderShape | 取景框形状(square:方形,circular:圆形) | String | 否 | square | 新属性 |
picShape | 图片形状(square:方形,circular:圆形) | String | 否 | square | 新属性 |
isModal | 是否为弹窗模式 | Boolean | 否 | true | |
showChooseBtn | 是否显示选择图片按钮 | Boolean | 否 | true | |
lockScroll | 是否在Dialog出现时将body滚动锁定 | Boolean | 否 | true | |
label | 默认打开裁剪工具按钮的显示文字 | String | 否 | 选择图片 | |
boxWidth | 裁剪工具宽度 | Number | 否 | 800 | |
boxHeight | 裁剪工具高度 | Number | 否 | 400 | |
cutWidth | 默认裁剪宽度 | Number | 否 | 200 | |
cutHeight | 默认裁剪高度 | Number | 否 | 200 | |
tool | 是否显示工具栏 | Boolean | 否 | true | |
toolBgc | 工具栏背景色 | String(例: "#fff") | 否 | #fff | |
sizeChange | 是否能够调整裁剪框大小 | Boolean | 否 | true | |
moveAble | 能否调整裁剪区域位置 | Boolean | 否 | true | |
imgMove | 能否拖动图片 | Boolean | 否 | true | |
originalGraph | 是否直接裁剪原图 | Boolean | 否 | false | |
crossOrigin | 是否设置跨域,需要服务器做相应更改 | Boolean | 否 | false | |
crossOriginHeader | 设置跨域信息crossOrigin为true时才生效 | String | 否 | '' | |
rate | 图片比例 | String(例: "4:3") | 否 | - | |
WatermarkText | 水印文字 | String | 否 | '' | |
WatermarkTextFont | 水印文字字体 | String | 否 | '12px Sans-serif' | |
WatermarkTextColor | 水印文字颜色 | String | 否 | '#fff' | |
WatermarkTextX | 水印文字水平位置 | Number | 否 | 0.95 | |
WatermarkTextY | 水印文字垂直位置 | Number | 否 | 0.95 | |
smallToUpload | 如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件 | Boolean | 否 | false | |
saveCutPosition | 是否保存上一次裁剪位置及大小 | Boolean | 否 | false | |
scaleAble | 是否允许滚轮缩放图片 | Boolean | 否 | true | |
index | 自定义参数,将会同结果一起返回 | Any | 否 | null | |
previewMode | 裁剪过程中是否返回裁剪结果,如果裁剪出现卡顿时将此项设置为false | Boolean | 否 | true | |
fileType | 返回的文件类型 ( png / jpeg / webp) | String | 否 | png |
支持slot,在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮 ### 钩子函数: | 属性名 | 作用 | 类型 | 必填 | 返回值 | |:----:|:----:|:----:|:----:|:----:| |cutDown|完成截图后要执行的方法|Function|是|Object| |error|错误回调|Function|否|Error object| |onChooseImg|选择图片后|Function|否|Object| |onPrintImg|在画布上绘制图片|Function|否|Object| |onClearAll|清空画布|Function|否|null| ### 插槽(slot): | 插槽名称 | 作用 | |:----:|:----:| |open 或 openImgCutter|弹出裁剪框| |choose|选择本地图片| |cancel|取消/清空| |confirm|确认裁剪| |ratio|工具栏:宽高比| |scaleReset|工具栏: 重置缩放| |turnLeft|工具栏: 向左旋转| |turnRight|工具栏: 向右旋转| |reset|工具栏: 重置旋转| |flipHorizontal|工具栏: 水平翻转| |flipVertically|工具栏: 垂直翻转| ### 返回值 @cutDown:
属性名 | 类型 |
---|---|
fileName | 文件名 |
file | file类型的文件对象(IE部分版本可能不会返回) |
blob | blob类型的文件对象(IE部分版本可能不会返回) |
dataURL | dataURL |
index | Any |