vue图片裁剪插件：vue-img-cutter
vue-img-cutter 是一个简单易用的 vue 图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求
Github：https://github.com/acccccccb/vue-img-cutter
gitee：https://gitee.com/gluestick/vue-img-cutter
特点：
兼容IE9+，MSEdge，Chrome，Firefox
两种展现形式，行内或弹窗
可旋转、缩放图片
任意比例、大小裁剪
固定比例、大小裁剪
支持远程图片裁剪、跨域设置
使用：
安装 vue-img-cutter
npm install vue-img-cutter --save-dev
在项目中使用
在需要使用的页面中引入 vue-img-cutter，并注册成组件
<script>//引入vue-img-cutterimport ImgCutter from 'vue-img-cutter'export default { name: 'imgCutter', data() { return { } }, //将vue-img-cutter注册成组件 components:{ ImgCutter }}</script>
在页面中使用组件，并绑定 cutDown 事件，用来接收选择的图片信息
<template> <div> //使用组件，并绑定cutDown事件 <ImgCutter @cutDown="cutDown"></ImgCutter> </div></template><script>import ImgCutter from 'vue-img-cutter'export default { name: 'imgCutter', data() { return { } }, components:{ ImgCutter }, methods: { //通过cutDown事件接收选择的图片信息 cutDown(event) { console.log(event) } }}</script>
组件参数选项：
属性
作用
类型
是否必填
默认值
isModal
是否为弹窗模式
Boolean
否
true
showChooseBtn
是否显示选择图片按钮
Boolean
否
true
lockScroll
是否在弹窗出现时锁定页面滚动
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")
否
-
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
组件自定义插槽选项：
插槽名
作用
open 或 openImgCutter
页面中选择图片按钮
choose
弹窗工具中选择图片按钮
cancel
弹窗工具中取消按钮
confirm
弹窗工具中确定按钮
ratio
弹窗工具栏：宽高比例按钮
scaleReset
弹窗工具栏：重置缩放按钮
turnLeft
弹窗工具栏：向左旋转按钮
turnRight
弹窗工具栏：向右旋转按钮
reset
弹窗工具栏：重置旋转按钮
flipHorizontal
弹窗工具栏：水平翻转按钮
flipVertically
弹窗工具栏：垂直翻转按钮
组件钩子函数：
函数名
作用
类型
是否必填
返回值
cutDown
完成截图后执行
Function
是
Object
error
发生错误时执行
Function
否
Error object
onChooseImg
选择图片后执行
Function
否
Object
onPrintImg
绘制图片时执行
Function
否
Object
onClearAll
清空画布
Function
否
null
cutDown 事件接收选择的图片的信息值（返回值）：
属性
描述
fileName
文件名
file
file 类型的文件对象（IE部分版本可能不会返回）
blob
blob 类型的文件对象（IE部分版本可能不会返回）
dataURL
文件的 url 地址
选择图片并裁剪需要的大小：