Add avatar crop popup

This commit is contained in:
taehoon 2019-02-07 03:05:59 -05:00
parent 4f95371081
commit 13725f040b
11 changed files with 306 additions and 1118 deletions
src/components/user_settings

View file

@ -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
}