vue3-裁剪图片
-
适用于PC端，截图框固定，可设定最大放大倍数, 基于vue-cropper增加'截图框固定'的PC端补充并优化检测边界方法
-
界面样式借鉴于知乎上传头像组件
-
可传各种截图比例切换, number || string 用 ':' or '/' 分隔, eg: [1, '4:5', '9/16']
-
可传多张图片依次进行截图
-
之后返回截图后的outputFiles
-
使用了 vueCropper 组件
props
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | 上传图片 | 上传图片标题 |
| subTitle | string | 调整图片尺寸和位置 | 副标题 |
| maxScale | number | 2 | 最大放大比例 |
| files | [file] | [] | 图片源 |
| rate | [number] | [1] | 裁剪比例，可多选 |
| zIndex | number | 100001 | 层级 |
| bgColor | Color | rgba(245, 245, 245, 0.7) | 裁剪区域背景颜色 |
| options | object | {} | vueCropper 参数 |
options
img: '',
info: false, // 裁剪框的大小信息
full: true,
outputType: 'jpeg',
size: 1,
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: false, // 能否拖动截图框
autoCrop: true,
fixedBox: true, // 截图框固定大小
centerBox: true,
infoTrue: false,
fixedNumber: [1, 1],
enlarge: 0,
mode: 'cropCover',
canScale: false
