需求：上傳限定比例的圖片。前端框架是vue3 + element plus。
問(wèn)題：使用vueCropper后比例固定。但是上傳后的圖片很模糊

vueCropper官網(wǎng)

解決辦法

vueCropper中有一個(gè)full和high兩個(gè)參數(shù)，記得開啟

     const options: any = reactive({img: '', // 原圖文件autoCrop: true, // 默認(rèn)生成截圖框fixedBox: false, // 固定截圖框大小canMoveBox: true, // 截圖框可以拖動(dòng)fixed: true, // 截圖框?qū)捀吖潭ū壤齠ixedNumber: [4, 3], // 截圖框的寬高比例centerBox: true, // 截圖框被限制在圖片里面canMove: true, // 上傳圖片不允許拖動(dòng)canScale: true, // 上傳圖片不允許滾輪縮放full: true, //是否輸出原圖比例的截圖high: true, //是否按照設(shè)備的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>