RuoYi-Vue 使用vue-cropper实现图片裁剪-Toy模板网

这篇具有很好参考价值的文章主要介绍了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的底图