1，第一步安装vue-cropper
cnpm install vue-cropper
2，在main.js引用
import VueCropper from 'vue-cropper';Vue.use(VueCropper);
3，使用方法
<template><div class="footerBtn"><el-button @click="dialogVisible=true">上传头像</el-button><!-- 弹出层-裁剪 --><el-dialog title="编辑头像" :visible.sync="dialogVisible" :before-close="handleClose"><span><el-row><inputref="filElem"type="file"id="uploads"accept="image/png, image/jpeg, image/gif, image/jpg"@change="uploadImg($event,1)"class="el-button hide"style="margin-bottom:15px"/><div class="upload-img" @click="clickUpload">点击上传图片</div></el-row><el-row><el-col :span="14"><!-- 裁剪 --><vueCropperstyle="width:100%;height:300px"ref="cropper":img="attach.customaryUrl":autoCrop="options.autoCrop":fixedBox="options.fixedBox":canMoveBox="options.canMoveBox":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":centerBox="options.centerBox"@realTime="realTime"></vueCropper></el-col><el-col :span="6.5"><h2 align="center" class=" mar-left-50">头像预览</h2><div class="show-preview"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img" width="100%" /></div></div></el-col></el-row><el-row class="footerBtn" align="center"><el-button type="primary " size="medium" round @click="confirm('blob')">确认</el-button><el-button type="info" size="medium" round @click="handleClose">取消</el-button></el-row></span></el-dialog></div></template><script>//数据库里需要存两份图片地址，一张为原图地址，一张为裁剪后的头像地址export default {data() {return {dialogVisible: false,options: {autoCrop: true, //默认生成截图框fixedBox: true, //固定截图框大小canMoveBox: false, //截图框不能拖动centerBox: false, //截图框被限制在图片里面autoCropWidth:200, //截图框宽度autoCropHeight:200, //截图框高度 },previews: {}, //实时预览图数据attach: {//后端附件表id: "",userId: "",customaryUrl: "", //原图片路径laterUrl: "", //裁剪后图片路径 /static/logo.pngattachType: "photo" //附件类型},};},methods: {//控制弹出层关闭handleClose() {this.dialogVisible = false;},//实时预览realTime(data) {this.previews = data;},//点击图片调取inputclickUpload(){this.$refs.filElem.dispatchEvent(new MouseEvent('click')) },//选择本地图片uploadImg(e, num) {var file = e.target.files[0];if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {this.$message.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");return false;}//fileReader 接口，用于异步读取文件数据var reader = new FileReader();reader.readAsDataURL(file); //重要 以dataURL形式读取文件reader.onload = e => {// data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式let data = e.target.result;this.attach.customaryUrl = data;// 转化为base64// reader.readAsDataURL(file)// 转化为blob};},//确认截图,上传confirm(type) {this.$refs.cropper.getCropData(res => {console.log(res)//这里截图后的url 是base64格式 让后台转下就可以});}}};</script><style>/* 弹性布局 水平居中 */.el-dialog{width: 700px !important;height: auto;}.show-preview {display: flex;justify-content: center;}.preview {border-radius: 50%;overflow: hidden;border: 1px solid #cccccc;background: #cccccc;width: 150px !important;height: 150px !important;margin-left: 50px;margin-top: 50px;}.upload-img{width: 100px;height: 30px;border:1px solid #f08512;margin-bottom: 5px;line-height: 30px;text-align: center;cursor: pointer;}.footerBtn {display: flex;justify-content: center;margin-top: 15px;}</style>
4，方法api
5，内置方法
this.$refs.cropper.startCrop() //开始截图this.$refs.cropper.stopCrop()//停止截图this.$refs.cropper.clearCrop() //清除截图this.$refs.cropper.changeScale()//修改图片大小 正数为变大 负数变小
6，获取截图信息
//this.$refs.cropper.cropW//截图框宽度//this.$refs.cropper.cropH//截图框高度// 获取截图的base64 数据this.$refs.cropper.getCropData((data) => {// do somethingconsole.log(data) })// 获取截图的blob数据this.$refs.cropper.getCropBlob((data) => {// do somethingconsole.log(data) })
