需求：上传限定比例的图片。前端框架是vue3 + element plus。
问题：使用vueCropper后比例固定。但是上传后的图片很模糊
vueCropper官网
解决办法
vueCropper中有一个full和high两个参数，记得开启
const options: any = reactive({img: '', // 原图文件autoCrop: true, // 默认生成截图框fixedBox: false, // 固定截图框大小canMoveBox: true, // 截图框可以拖动fixed: true, // 截图框宽高固定比例fixedNumber: [4, 3], // 截图框的宽高比例centerBox: true, // 截图框被限制在图片里面canMove: true, // 上传图片不允许拖动canScale: true, // 上传图片不允许滚轮缩放full: true, //是否输出原图比例的截图high: true, //是否按照设备的dpr 输出等比例图片maxImgSize: 8000, //限制图片最大宽度和高度});
顺便记录一下如何使用vueCropper
//package.json中的版本"vue-cropper": "^1.1.2",
import { VueCropper } from 'vue-cropper';<vueCropperclass="crop-box"ref="cropper":img="options.img":autoCrop="options.autoCrop":fixedBox="options.fixedBox":canMoveBox="options.canMoveBox":centerBox="options.centerBox":fixed="options.fixed":fixedNumber="options.fixedNumber":canMove="options.canMove":canScale="options.canScale":full="options.full":high="options.high"></vueCropper>
