Add avatar crop popup
This commit is contained in:
parent
4f95371081
commit
13725f040b
11 changed files with 306 additions and 1118 deletions
src/components/user_settings
|
@ -1,6 +1,7 @@
|
|||
import { unescape } from 'lodash'
|
||||
|
||||
import TabSwitcher from '../tab_switcher/tab_switcher.js'
|
||||
import ImageCropper from '../image_cropper/image_cropper.vue'
|
||||
import StyleSwitcher from '../style_switcher/style_switcher.vue'
|
||||
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
|
||||
|
||||
|
@ -24,7 +25,6 @@ const UserSettings = {
|
|||
bannerUploading: false,
|
||||
backgroundUploading: false,
|
||||
followListUploading: false,
|
||||
avatarPreview: null,
|
||||
bannerPreview: null,
|
||||
backgroundPreview: null,
|
||||
avatarUploadError: null,
|
||||
|
@ -41,7 +41,8 @@ const UserSettings = {
|
|||
},
|
||||
components: {
|
||||
StyleSwitcher,
|
||||
TabSwitcher
|
||||
TabSwitcher,
|
||||
ImageCropper
|
||||
},
|
||||
computed: {
|
||||
user () {
|
||||
|
@ -117,31 +118,13 @@ const UserSettings = {
|
|||
}
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
submitAvatar () {
|
||||
if (!this.avatarPreview) { return }
|
||||
|
||||
let img = this.avatarPreview
|
||||
// eslint-disable-next-line no-undef
|
||||
let imginfo = new Image()
|
||||
let cropX, cropY, cropW, cropH
|
||||
imginfo.src = img
|
||||
if (imginfo.height > imginfo.width) {
|
||||
cropX = 0
|
||||
cropW = imginfo.width
|
||||
cropY = Math.floor((imginfo.height - imginfo.width) / 2)
|
||||
cropH = imginfo.width
|
||||
} else {
|
||||
cropY = 0
|
||||
cropH = imginfo.height
|
||||
cropX = Math.floor((imginfo.width - imginfo.height) / 2)
|
||||
cropW = imginfo.height
|
||||
}
|
||||
submitAvatar (cropper) {
|
||||
const img = cropper.getCroppedCanvas({ width: 150, height: 150 }).toDataURL('image/jpeg')
|
||||
this.avatarUploading = true
|
||||
this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
|
||||
this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
|
||||
if (!user.error) {
|
||||
this.$store.commit('addNewUsers', [user])
|
||||
this.$store.commit('setCurrentUser', user)
|
||||
this.avatarPreview = null
|
||||
} else {
|
||||
this.avatarUploadError = this.$t('upload.error.base') + user.error
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue