2020-12-22

简单易用的vue图片裁剪插件

 VUE  HTML我帮您  1年前  472次浏览

简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。

 

• 兼容IE9+,MSEdge,Chrome,Firefox
• 两种展现形式，行内或弹窗
• 可旋转、缩放图片
• 任意比例、大小裁剪
• 固定比例、大小裁剪
• 支持远程图片裁剪、跨域设置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

安装   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
sizeChange	是否能够调整裁剪框大小	Boolean	否	true
moveAble	能否调整裁剪区域位置	Boolean	否	true
crossOrigin	是否设置跨域，需要服务器做相应更改	Boolean	否	false
crossOriginHeader	设置跨域信息crossOrigin为true时才生效	String	否	''
rate	图片比例	String(例: "4:3")	否	-
cutDown	完成截图后要执行的方法	Function	是	-
error	错误回调	Function	否	-

支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮