vue-img-cutter-dwg
v2.0.30
Published
简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。
Downloads
6
Readme
vue-img-cutter
简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。
特色：
- 兼容IE9+,MSEdge,Chrome,Firefox
- 两种展现形式，行内或弹窗
- 可旋转、缩放图片
- 任意比例、大小裁剪
- 固定比例、大小裁剪
- 支持远程图片裁剪、跨域设置
插件截图：
演示地址：
https://ihtmlcss.com/demo/dist/#/croptool
项目地址：
Github：https://github.com/acccccccb/vue-img-cutter
码云：https://gitee.com/GLUESTICK/vue-img-cutter
如果此项目对你有帮助，请给我一个star :)
使用方法：
- 安装
npm install vue-img-cutter --save-dev- 将ImgCutter.vue文件引入项目：
import ImgCutter from 'vue-img-cutter'
export default {
components:{
ImgCutter
},
...
}- 在页面中使用：
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>- 可使用solt
<ImgCutter v-on:cutDown="cutDown">
<button slot="open">选择图片</button>
</ImgCutter>- 远程、跨域裁剪（兼容IE9）
需要自己写一个方法来触发裁剪工具弹出 在方法中先将图片上传至服务器，拿到返回的url后创建一个obj，然后将对象传入裁剪工具
// 传入的obj必须包含这四个属性
let obj = {
name:'1.jpg',//远程图片名称
src:'http://url/1.jpg',//远程图片url
width:200,//远程图片的原始宽度
height:200,//远程图片的原始高度
}forIe9:function(){
// 此处需要先提交待裁剪的图片到服务器上，然后拿到图片name,src,width,height,这些参数必须传
uploadMethod(file).then((res)=>{
this.$refs.imgCutterModal.handleOpen({
name:res.name,
src:res.src,
width:res.width,
height:res.height,
});
});
}参数说明：
| 属性名 | 作用 | 类型 | 必填 | 默认值 | |:----:|----|:----:|:----:|:----:| |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| |crossOrigin|是否设置跨域，需要服务器做相应更改|Boolean|否|false| |crossOriginHeader|设置跨域信息crossOrigin为true时才生效|String|否|''| |rate|图片比例|String(例: "4:3")|否|-| |cutDown|完成截图后要执行的方法|Function|是|-| |error|错误回调|Function|否|-|
支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮
插槽(slot)：
| 插槽名称 | 作用 | |:----:|:----:| |open 或 openImgCutter|弹出裁剪框| |choose|选择本地图片| |cancel|取消/清空| |confirm|确认裁剪|
返回值：
| 属性名 | 类型 | |:----:|:----:| |fileName|文件名| |file|file类型的文件对象（IE部分版本可能不会返回）| |blob|blob类型的文件对象（IE部分版本可能不会返回）| |dataURL|dataURL|
开发中功能：
- 原图裁剪 开发中
更新日志：
2.0.30
- 修复了选区超出画布的问题
2.0.29
- 优化了裁剪控件的操作体验
- 当裁剪宽度/高度小于20时隐藏四边中间的操作杆
2.0.28
- 调整了版本号显示的位置
- 新增三个插槽：choose/cancel/confirm
- 新增属性：工具栏背景色 toolBgc
- 将裁剪框限制在画布内
2.0.27
- 修正了裁剪远程图片时创建的img对象被显示出来的问题
- 修正了在IE浏览器下点击取消按钮报错的问题
- 远程图片加载失败时不弹出裁剪工具
2.0.26
- 修正了当没有选择图片直接选择取消会导致错误的问题
2.0.25
- 更新说明文档
2.0.24
- 简化了兼容IE9的方法，只需要在执行this.$refs['yourComponent'].handleOpen(imgObj)时传入对象，对象必须包含name,src,width,height属性
- 修正了行内模式下鼠标滚轮缩放失效的问题
- 增加了跨域参数
- 增加了 error 参数，将会返回错误信息
2.0.23
- 新增参数isModal/showChooseBtn/lockScroll
- 可选择作为行内组件或者弹窗组件，可选是否显示选择图片按钮，是否在弹窗打开时锁定body滚动
2.0.22
- 兼容IE9+,MSEdge,chrome,firefox
- 由于没有找到IE11以下的浏览器，所以只能在仿真模式下测试，所以IE11以下可能会出现一些我没发现的问题，目前仿真模式下IE9+都测试通过了。IE8及以下不再支持。
- 如果需要兼容IE9，需要先将图片上传到服务器上，然后执行this.$refs['yourComponent'].handleOpen(callback);
- 添加了importImgToCanv方法来兼容IE9，必须在执行handleOpen后才能执行
- 拖动，调整选框时会自动隐藏工具栏
- 稍微调整了下样式，增加了动态的蚂蚁线
2.0.21
- 兼容IE8+,MSEdge,chrome,firefox
- 新增了设置参数，可固定裁剪框位置，固定裁剪尺寸，具体请看参数说明
- 修复了非IE系浏览器不返回file对象的问题
2.0.20
- 兼容IE11+,MSEdge。IE11以下版本未测试
2.0.19
- 修改了返回值，现在将追加返回文件名和file类型的文件对象
2.0.18
- 修复了点击选择图片按钮时有一定几率刷新页面的问题
2.0.17
- 调整了样式
- 修正了弹窗超出屏幕后被遮挡的问题
2.0.16
- 修正了旋转工具条显示错误的问题
2.0.15
- 增加工具栏 可对图片进行旋转/缩放操作
- 优化了动画效果