vue-img-clipping

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