Automatic square cropping for avatar upload, preview of the new avatar.

This commit is contained in:
Shpuld Shpuldson 2017-06-19 12:26:33 +03:00
parent 3785a863cb
commit 95605c32f1
2 changed files with 23 additions and 28 deletions

View file

@ -8,10 +8,9 @@ const settings = {
hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
hideNsfwLocal: this.$store.state.config.hideNsfw, hideNsfwLocal: this.$store.state.config.hideNsfw,
muteWordsString: this.$store.state.config.muteWords.join('\n'), muteWordsString: this.$store.state.config.muteWords.join('\n'),
previewfile: null,
autoLoadLocal: this.$store.state.config.autoLoad, autoLoadLocal: this.$store.state.config.autoLoad,
hoverPreviewLocal: this.$store.state.config.hoverPreview, hoverPreviewLocal: this.$store.state.config.hoverPreview,
muteWordsString: this.$store.state.config.muteWords.join('\n') previewfile: null
} }
}, },
components: { components: {
@ -30,20 +29,29 @@ const settings = {
reader.onload = ({target}) => { reader.onload = ({target}) => {
const img = target.result const img = target.result
this.previewfile = img this.previewfile = img
/*this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
if (!user.error) {
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)
}
})*/
} }
reader.readAsDataURL(file) reader.readAsDataURL(file)
}, },
submitAvatar () { submitAvatar () {
if (!this.previewfile) if (!this.previewfile) { return }
return
const img = this.previewfile const img = this.previewfile
this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => { // eslint-disable-next-line no-undef
let imginfo = new Image()
let cropX, cropY, cropW, cropH
imginfo.src = this.previewfile
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
}
this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
if (!user.error) { if (!user.error) {
this.$store.commit('addNewUsers', [user]) this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user) this.$store.commit('setCurrentUser', user)

View file

@ -13,7 +13,7 @@
<p>Your current avatar:</p> <p>Your current avatar:</p>
<img :src="user.profile_image_url_original" class="old-avatar"></img> <img :src="user.profile_image_url_original" class="old-avatar"></img>
<p>Set new avatar:</p> <p>Set new avatar:</p>
<img class="new-avatar" v-bind:src="previewfile"> <img class="new-avatar" v-bind:src="previewfile" v-if="previewfile">
</img> </img>
<div> <div>
<input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input> <input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
@ -71,7 +71,9 @@
} }
.new-avatar { .new-avatar {
max-width: 100%; object-fit: cover;
width: 128px;
height: 128px;
border-radius: 5px; border-radius: 5px;
} }
@ -80,21 +82,6 @@
min-height: 28px; min-height: 28px;
width: 10em; width: 10em;
} }
.cropper {
//position: absolute;
cursor: move;
width: 128px;
height: 128px;
border:1px solid #fff;
background-color: #000000;
.sub {
width: 100%;
height: 100%;
margin: -1px -1px -1px -1px ;
border:1px dashed #000;
}
}
} }
.setting-list { .setting-list {
list-style-type: none; list-style-type: none;