实现效果如下：
一、安装
npm install vue-cropper --save
二、在main.js中引入
import VueCropper from 'vue-cropper'; import 'vue-cropper/dist/index.css';app.use(VueCropper)
三、使用代码如下
<div style="overflow: hidden; margin: 0 20%"><div style="float: left"><el-uploadref="pic"style="padding: 1.6em"action=""list-type="picture":limit="1"accept=".bmp, .jpg, .png, .jpeg, .swf":auto-upload="false":on-change="changeUpload":show-file-list="false"@mouseenter="isShow()"@mouseleave="isShow()"><div v-show="showMod" class="shade"><el-icon size="20" color="#fff"><edit /></el-icon></div><el-image v-if="circleUrl" v-loading="loading" :src="circleUrl" class="avatar"></el-image></el-upload><div class="el-upload__tip">(点击头像上传图片)</div><el-dialog v-if="dialogVisible" v-model="dialogVisible" title="图片剪裁" width="40%"><div class="cropper" style="text-align: center"><vueCropperref="cropper":img="option.img":output-size="option.size":output-type="option.outputType":info="true":full="option.full":can-move="option.canMove":can-move-box="option.canMoveBox":original="option.original":auto-crop="option.autoCrop":fixed="option.fixed":fixed-number="option.fixedNumber":center-box="option.centerBox":info-true="option.infoTrue":fixed-box="option.fixedBox"></vueCropper></div><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="finish">修改头像</el-button></div></template></el-dialog></div><div style="float: left; margin: 1.6em 0"><el-form ref="form" :model="form" label-width="100px" size="large"><el-form-item label="用户名">{{ form.name }}</el-form-item><el-form-item label="用户角色"><el-tag v-for="(role, index) in form.roles" :key="index">{{ role }}</el-tag></el-form-item><el-form-item label="联系电话">{{ form.phone }}</el-form-item></el-form><div style="margin: 20px 0"><el-button :icon="Edit" size="large" style="font-size: 16px" @click="showPasswdChange = true">修改密码</el-button></div></div></div>
其中data里面的剪裁图片数据
option: {img: '', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 1, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框autoCropWidth: 200, // 默认生成截图框宽度autoCropHeight: 200, // 默认生成截图框高度fixedBox: false, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [800, 800], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: true, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: true, // 截图框是否被限制在图片里面infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},
其中关键的一些方法
finish() {this.$refs.cropper.getCropBlob(async (data) => {let res = await blobToBase64(data)this.circleUrl = resawait this.updUserInfo(res)this.dialogVisible = false})},import { blobToBase64 } from '@/utils' //该方法单独写了如下：export function blobToBase64(blob) {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.onload = (e) => {resolve(e.target.result);};// readAsDataURLfileReader.readAsDataURL(blob);fileReader.onerror = () => {reject(new Error("blobToBase64 error"));};});}
