在vue3.x中使用应该使用
vue-cropper@next
版本
github详解
npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
//组件中使用
import {
VueCropper } from "vue-cropper";
自己可以把裁剪二次封装成一个组件,用在自己项目中
可以使用一个dialog承载它,当你上传完图片,展示裁剪dialog进行裁剪
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
<div class="外层这个样式一定要给你一个高">
<VueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:fixed-box="option.fixedBox"
:original="option.original"
:auto-crop="option.autoCrop"
:auto-crop-width="option.autoCropWidth"
:auto-crop-height="option.autoCropHeight"
:center-box="option.centerBox"
@realTime="realTime"
:high="option.high"
@img-load="imgLoad"
mode="cover"
:max-img-size="option.max"
@crop-moving="cropMoving"
></VueCropper>
</div>
</el-dialog>
option: {
img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4",
size: 1,
full: false,
outputType: "png",
canMove: false,
fixedBox: false,
original: false,
canMoveBox: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 160,
autoCropHeight: 150,
centerBox: true,
high: true,
max: 99999,
fixed: true,
fixedNumber: [1, 2],
},