目录
安装插件vue-cropper
页面中引用插件
原头像
点击“修改头像”按钮，弹出修改头像弹窗
修改头像弹窗
安装插件vue-cropper
npm install vue-cropper --save
页面中引用插件
import {VueCropper} from 'vue-cropper'
components: {VueCropper},
原头像
<div style="text-align: center"><img style="border-radius: 50%" width="120px" :src="avatarURL" ><el-button type="text" @click="editAvatar">修改头像</el-button></div>
点击“修改头像”按钮，弹出修改头像弹窗
editAvatar() {this.editAvatarDialog = truethis.option.img = this.avatarURL},
修改头像弹窗
<el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="40%"><el-row type="flex" justify="center"><div class="cropper"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="option.info":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"@realTime="realTime"></vueCropper></div><div class="previewBox"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div><el-row type="flex" justify="center"><el-uploadaction="":show-file-list="false":auto-upload="false":on-change="uploadImg"><el-button size="mini" type="primary"> 更换头像</el-button></el-upload></el-row><br><el-row><el-button icon="el-icon-plus" circle size="mini"@click="changeScale(1)"></el-button><el-button icon="el-icon-minus" circle size="mini"@click="changeScale(-1)"></el-button><el-button icon="el-icon-download" circle size="mini"@click="down('blob')"></el-button><el-button icon="el-icon-refresh-left" circle size="mini"@click="rotateLeft"></el-button><el-button icon="el-icon-refresh-right" circle size="mini"@click="rotateRight"></el-button></el-row></div></el-row><span slot="footer" class="dialog-footer"><el-button @click="editAvatarDialog = false">取 消</el-button><el-button type="primary" @click="saveEditAvatar">确 定</el-button></span></el-dialog>
相关变量
avatarURL: require("@/assets/images/头像.jpg"),editAvatarDialog: false,previews: {},option: {img: '', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 1, // 剪切后的图片质量（0.1-1）full: true, // 输出原图比例截图 props名fulloutputType: 'png', // 裁剪生成额图片的格式canMove: true, // 能否拖动图片original: false, // 上传图片是否显示原始宽高canMoveBox: true, // 能否拖动截图框autoCrop: true, // 是否默认生成截图框autoCropWidth: 150,autoCropHeight: 150,fixedBox: true // 截图框固定大小},
相关方法
// 保存头像修改saveEditAvatar() {this.editAvatarDialog = falsethis.finish('blob')},// 放大/缩小changeScale(num) {num = num || 1;this.$refs.cropper.changeScale(num);},// 左旋转rotateLeft() {this.$refs.cropper.rotateLeft();},// 右旋转rotateRight() {this.$refs.cropper.rotateRight();},// 保存上传图片finish(type) {if (type === 'blob') {this.$refs.cropper.getCropBlob((data) => {this.avatarURL = window.URL.createObjectURL(data)//访问接口保存到数据库写这儿!})} else {this.$refs.cropper.getCropData((data) => {//访问接口保存到数据库写这儿!})}},// 实时预览函数realTime(data) {this.previews = data},// 下载图片down(type) {var aLink = document.createElement('a')aLink.download = 'author-img'if (type === 'blob') {this.$refs.cropper.getCropBlob((data) => {aLink.href = window.URL.createObjectURL(data)aLink.click()})} else {this.$refs.cropper.getCropData((data) => {aLink.href = data;aLink.click()})}},// 更换头像--上传本地图片uploadImg(file) {var _this = this;var reader = new FileReader();reader.onload = (e) => {let data;if (typeof e.target.result === 'object') {// 把Array Buffer转化为blob 如果是base64不需要data = window.URL.createObjectURL(new Blob([e.target.result]))} else {data = e.target.result}_this.option.img = data}// 转化为base64// reader.readAsDataURL(file.raw)// 转化为blobreader.readAsArrayBuffer(file.raw);},
相关样式（必要）
.previewBox {text-align: center;margin-left: 60px;}.preview {width: 150px;height: 150px;margin: 0px auto 20px auto;border-radius: 50%;border: 1px solid #ccc;background-color: #ccc;overflow: hidden;}.cropper {width: 260px;height: 260px;}
