peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 头像修改

Browse Source 
头像修改
This commit is contained in:
ronger 2023-12-29 15:34:07 +08:00 committed by GitHub
commit d8e12a414a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 107 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
pages/user/settings/avatar.vue
View File

@ -1,35 +1,60 @@
<template> <template>
<el-row> <el-row>
<el-col> <el-col :spn="12">
<h1>我的头像</h1> <h1>我的头像</h1>
</el-col> </el-col>
<el-col> <el-col>
<el-form :model="user" ref="user" label-width="100px"> <el-form :model="user" ref="user" label-width="100px">
<el-form-item> <el-form-item>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="12">
<vue-cropper <client-only>
ref="cropper" <div class="cropperBox">
:aspect-ratio="1 / 1" <!-- <vue-cropper-->
:src="avatarUrl" <!-- :autoCrop="autoCrop"-->
:checkCrossOrigin="false" <!-- :img="avatarUrl"-->
:checkOrientation="false" <!-- ref="cropper"-->
:imgStyle="{width: '360px'}" <!-- :fixed="true"-->
:autoCropArea="1" <!-- @realTime="realTime"-->
:autoCrop="autoCrop" <!-- @imgMoving="cropImage"-->
preview=".preview" <!-- @cropMoving="cropImage"-->
/> <!-- />-->
<vue-cropper
:autoCrop="autoCrop"
:img="avatarUrl"
ref="cropper"
:fixed="true"
@realTime="realTime"
/>
</div>
</client-only>
</el-col> </el-col>
<el-col :span="24" style="margin-top: 2rem;"> <el-col :span="24" style="margin-top: 2rem;">
<el-col :span="8" style="max-width: 20rem;max-height: 20rem;"> <el-col :span="8" style="max-width: 20rem;max-height: 20rem;">
<div class="preview preview-large"/> <div class="preview preview-large" :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
</el-col> style="overflow:hidden;margin: 0 auto">
<el-col :span="6" style="height: 20rem;"> <img :src="cropImg.url" :style="cropImg.img">
<div class="preview preview-medium"/> </div>
</el-col>
<el-col :span="4" style="height: 20rem;">
<div class="preview preview-small"/>
</el-col> </el-col>
<!-- <el-col :span="6" style="height: 20rem;">-->
<!-- <div class="preview preview-medium" style="overflow:hidden;">-->
<!-- <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"-->
<!-- style="overflow:hidden;margin: 0 auto">-->
<!-- <img :src="cropImg.url" :style="cropImg.img">-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="4" style="height: 20rem;">-->
<!-- <div class="preview preview-small" style="overflow:hidden;">-->
<!-- <div :style="{height:(cropImg.h*0.2)+'px',width:cropImg.w+'px'}"-->
<!-- style="overflow:hidden;margin: 0 auto">-->
<!-- <img :src="cropImg.url" :style="cropImg.img">-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="preview preview-small">&ndash;&gt;-->
<!-- &lt;!&ndash; <img :src="cropImg.url"/>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>-->
</el-col> </el-col>
<el-col :span="24" style="margin-top: 2rem;"> <el-col :span="24" style="margin-top: 2rem;">
<el-upload <el-upload
@ -62,7 +87,7 @@
</el-upload> </el-upload>
<el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button> <el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button>
<el-button type="primary" round plain @click.prevent="reset">重置</el-button> <el-button type="primary" round plain @click.prevent="reset">重置</el-button>
<el-button type="primary" round plain @click.prevent="cropImage">提交</el-button> <el-button type="primary" round plain @click.prevent="updateUser">提交</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -75,15 +100,13 @@
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import Avataaars from 'vuejs-avataaars'; import Avataaars from 'vuejs-avataaars';
import saveSvg from 'save-svg-as-png'; import saveSvg from 'save-svg-as-png';
import VueCropper from 'vue-cropper';
const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar'); const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
export default { export default {
name: "avatar", name: "avatar",
middleware: 'auth', middleware: 'auth',
components: { components: {
Avataaars, Avataaars
VueCropper
}, },
computed: { computed: {
...mapState({ ...mapState({
@ -97,14 +120,19 @@ export default {
return { return {
user: {}, user: {},
loading: false, loading: false,
oldAvatarUrl: '',
avatarUrl: '', avatarUrl: '',
avatar: {}, avatar: {},
cropImg: '', cropImg: '',
data: null, data: null,
autoCrop: true autoCrop: true,
} }
}, },
methods: { methods: {
realTime(data) {
console.log(data.img)
this.cropImg = data;
},
genAvatar() { genAvatar() {
let _ts = this; let _ts = this;
let user = _ts.user let user = _ts.user
@ -116,7 +144,6 @@ export default {
user.avatarType = 1; user.avatarType = 1;
user.avatarUrl = uri; user.avatarUrl = uri;
_ts.$set(_ts, 'avatarUrl', uri); _ts.$set(_ts, 'avatarUrl', uri);
_ts.$refs.cropper.replace(uri);
} else { } else {
_ts.$message.error('头像上传失败 !'); _ts.$message.error('头像上传失败 !');
} }
@ -159,45 +186,47 @@ export default {
} else { } else {
_ts.$set(_ts, 'user', res); _ts.$set(_ts, 'user', res);
_ts.$set(_ts, 'avatarUrl', res.avatarUrl); _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
_ts.$refs.cropper.replace(res.avatarUrl); _ts.$set(_ts, 'oldAvatarUrl', res.avatarUrl);
// _ts.webImageToBase64(res.user.avatarUrl); // _ts.webImageToBase64(res.user.avatarUrl);
} }
} }
}) })
}, },
reset() { reset() {
this.$refs.cropper.reset(); this.avatarUrl = JSON.parse(JSON.stringify(this.oldAvatarUrl))
// this.$refs.cropper.clearCrop();
}, },
// get image data for post processing, e.g. upload or setting image src // get image data for post processing, e.g. upload or setting image src
cropImage() { cropImage() {
let _ts = this; let _ts = this;
try { this.$refs.cropper.getCropData(data => {
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL(); let user = _ts.user;
} catch (e) { user.avatarUrl = data;
_ts.$message.error('图片获取失败 !'); user.avatarType = '1';
return; _ts.$set(_ts, 'user', user);
} _ts.$set(_ts, 'avatarUrl', data);
let user = _ts.user; })
user.avatarType = 1;
user.avatarUrl = _ts.cropImg;
_ts.updateUser(user);
}, },
updateUser(user) { updateUser() {
let _ts = this; let _ts = this;
let user = _ts.user;
_ts.$refs['user'].validate((valid) => { _ts.$refs['user'].validate((valid) => {
if (valid) { if (valid) {
_ts.$axios.$patch('/api/user-info/update', user).then(function (res) { this.$refs.cropper.getCropData(data => {
if (res) { user.avatarUrl = data
if (res.message) { _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
_ts.$message.error(res.message); if (res) {
} else { if (res.message) {
_ts.$set(_ts, 'user', res); _ts.$message.error(res.message);
_ts.$set(_ts, 'avatarUrl', res.avatarUrl); } else {
_ts.$store.commit('setUserInfo', res); _ts.$set(_ts, 'user', res);
_ts.$message.success('更新成功 !'); _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
_ts.$store.commit('setUserInfo', res);
_ts.$message.success('更新成功 !');
}
} }
} })
}) });
} else { } else {
_ts.$message.error('数据异常 !'); _ts.$message.error('数据异常 !');
} }
@ -209,7 +238,6 @@ export default {
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function () { reader.onload = function () {
_ts.$set(_ts, 'avatarUrl', this.result); _ts.$set(_ts, 'avatarUrl', this.result);
_ts.$refs.cropper.replace(this.result);
} }
}, },
compress(img, width, height, ratio) { compress(img, width, height, ratio) {
@ -312,6 +340,12 @@ export default {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
} }
.preview-large img {
object-fit: contain;
width: 16rem;
height: 16rem;
}
.preview-large { .preview-large {
width: 16rem; width: 16rem;
height: 16rem; height: 16rem;
@ -324,6 +358,13 @@ export default {
overflow: hidden; overflow: hidden;
} }
.preview-medium img {
object-fit: contain;
width: 8rem;
height: 8rem;
}
.preview-medium { .preview-medium {
width: 8rem; width: 8rem;
height: 8rem; height: 8rem;
@ -334,8 +375,10 @@ export default {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff; background-color: #ffffff;
overflow: hidden; overflow: hidden;
} }
.preview-small { .preview-small {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -347,4 +390,17 @@ export default {
background-color: #ffffff; background-color: #ffffff;
overflow: hidden; overflow: hidden;
} }
.preview-small img {
object-fit: contain;
width: 2rem;
height: 2rem;
}
.cropperBox {
width: 100%;
height: 256px;
margin-bottom: 20px;
border: 1px solid #F2F6FC;
}
</style> </style>