Automatic square cropping for avatar upload, preview of the new avatar.
This commit is contained in:
parent
3785a863cb
commit
95605c32f1
2 changed files with 23 additions and 28 deletions
|
@ -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)
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue