vue-img-cutter

Demo

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

特色：

---

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

插件截图：

---

演示地址：

---

ihtmlcss.com/demo/dist/#…

项目地址：

---

Github：github.com/acccccccb/v…

码云：gitee.com/GLUESTICK/v…

如果此项目对你有帮助，请给我一个star :)

使用方法：

---

1. 安装

npm install vue-img-cutter --save-dev

2. 将ImgCutter.vue文件引入项目：

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}

3. 在页面中使用：

<ImgCutter v-on:cutDown="cutDown"></ImgCutter>

4. 可使用solt

<ImgCutter v-on:cutDown="cutDown">
    <button slot="open">选择图片</button>
</ImgCutter>

5. 远程、跨域裁剪（兼容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
originalGraph	是否直接裁剪原图	Boolean	否	false
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