vuecropper上传照片并可裁剪、预览插件

1、下载vuecropper插件

npm install vue-cropper / yarn add vue-cropper

2、页面内引入插件

import { VueCropper }  from "vue-cropper";

3、全局引入

import VueCropper from 'vue-cropper';

import 'vue-cropper/dist/index.css'

const app = createApp(App)

app.use(VueCropper)

app.mount('#app')

代码中使用

<vueCropper

  ref="cropper"

  :img="option.img"

  :outputSize="option.size"

  :outputType="option.outputType"

></vueCropper>

cropper插件的参数

·img：裁剪图片的地址（url、base64、blob）

·outputSize：裁剪生成的图片质量（0.1-1）

·outputType：裁剪生成的图片格式（jpeg\png\webp）

·info：裁剪边框的大小信息（true、false）

·canScale：图片是否允许滚轮缩放

·autoCrop：是否默认生成裁剪框

·autoCropWidth：默认生成截图框宽度（%）

·autoCropHeight：默认生成截图框高度（%）

·fixed：是否开启截图框宽高固定比例

·fixedNumber：截图框的宽高比  [宽，高]

·fixedBox：固定截图框大小

·full：是否输出原图比例的截图

·canMore：上传图片是否可以移动

·canMoveBox：裁剪框能否拖动

·original：上传图片按照原始比例渲染

·centerBox：截图框是否被限制在图片里面

·high：是否按照设备的dpr输出等比例图片

·infoTrue：true->为了展示真实输出图片宽高

false->展示看到的截图框高度

·maxImgSize：限制图片最大宽度和高度

·enlager：图片根据截图框输出的比例倍数

·mode：图片默认渲染方式

·limitMinSize：裁剪框限制最小区域

·fillColor：导出时背景颜色填充