RuoYi-Vue 使用vue-cropper实现图片裁剪

前言

• 若依前端分离版（RuoYi-Vue） v3.8.5

RuoYi-Vue 已内置 vue-cropper

ruoyi-ui/package.json：

"vue-cropper": "0.5.5",

RuoYi-Vue 已有使用vue-cropper实现图片裁剪的功能

参考个人中心的修改头像功能

vue-cropper 资源

GitHub地址： https://github.com/xyxiao001/vue-cropper
Gitcode地址：https://gitcode.com/xyxiao001/vue-cropper/overview

演示 Demo

参数组合

开启截图框比例

fixed: true, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例, 开启fixed生后效
autoCrop: true, //是否默认生成截图框
autoCropWidth: 300, //默认生成截图框宽度
autoCropHeight: 300, //默认生成截图框高度， 开启fixed后失效

• 上述组合情况下，autoCropHeight 参数失效。

截取的图片的宽高固定

假设需要截取尺寸为1600*900的图片，不是16:9同比例的其它规格（800*450）的图片。

fixed: true, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例, 开启fixed生后效
autoCrop: true, //是否默认生成截图框
autoCropWidth: 1600, //默认生成截图框宽度
autoCropHeight: 900, //默认生成截图框高度， 开启fixed后失效
fixedBox: true, //固定截图框大小，不允许拖动改变截图框的大小
enlarge: 1, //图片根据截图框输出比例倍数
infoTrue: false, //true为展示真实输出图片宽高(截图框宽高*enlarge)，false展示看到的截图框宽高

• 如果操作区的宽、高均超过1600、900时，配置有效；反之，无效。截图框将被缩小。

操作区的宽、高不足时，截取的图片的宽高固定

截图框宽高不能超过操作区的宽高。当所需的宽高大于操作区的宽高时，需要用到enlarge参数。
假设操作区域的宽高j均为500，下面的配置，可以截取800*800的图片。

fixed: true, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例, 开启fixed生后效
autoCrop: true, //是否默认生成截图框
autoCropWidth: 400, //默认生成截图框宽度
autoCropHeight: 400, //默认生成截图框高度， 开启fixed后失效
fixedBox: true, //固定截图框大小，不允许拖动改变截图框的大小
enlarge: 2, //图片根据截图框输出比例倍数
infoTrue: true, //true为展示真实输出图片宽高(截图框宽高*enlarge)，false展示看到的截图框宽高
mode: "400px", //图片默认渲染方式。将图片渲染成宽度为400px的底图。

• 当图片宽高比大于所需的宽高比时，会导致截图框宽高改变
• 截图框宽高改变时，会导致真实输出图片宽高改变
• 真实输出图片宽高改变时，就得不到800*800的图片
• 因此，还需要用户配合一下，选择合适宽高比的图片
• 图片真实宽度小于400时，图片会被放大到宽度400
• 图片真实宽度大于400时，图片会被缩小到宽度400

假设操作区域的宽高j均为500，下面的配置，可以截取1200*1200的图片。

fixed: true, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例, 开启fixed生后效
autoCrop: true, //是否默认生成截图框
autoCropWidth: 400, //默认生成截图框宽度
autoCropHeight: 400, //默认生成截图框高度， 开启fixed后失效
fixedBox: true, //固定截图框大小，不允许拖动改变截图框的大小
enlarge: 3, //图片根据截图框输出比例倍数
infoTrue: true, //true为展示真实输出图片宽高(截图框宽高*enlarge)，false展示看到的截图框宽高
mode: "400px", //图片默认渲染方式。将图片渲染成宽度为400px的底图

参考

VUE中使用vue-cropper实现图片裁剪，及问题总结