karl/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/settings/settings.js
View file

@ -8,10 +8,9 @@ const settings = {
hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
hideNsfwLocal: this.$store.state.config.hideNsfw,
muteWordsString: this.$store.state.config.muteWords.join('\n'),
previewfile: null,
autoLoadLocal: this.$store.state.config.autoLoad,
hoverPreviewLocal: this.$store.state.config.hoverPreview,
muteWordsString: this.$store.state.config.muteWords.join('\n')
previewfile: null
}
},
components: {
@ -30,20 +29,29 @@ const settings = {
reader.onload = ({target}) => {
const img = target.result
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)
},
submitAvatar () {
if (!this.previewfile)
return
if (!this.previewfile) { return }
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) {
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)

21
src/components/settings/settings.vue
View file

@ -13,7 +13,7 @@
<p>Your current avatar:</p>
<img :src="user.profile_image_url_original" class="old-avatar"></img>
<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>
<div>
<input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
@ -71,7 +71,9 @@
}
.new-avatar {
max-width: 100%;
object-fit: cover;
width: 128px;
height: 128px;
border-radius: 5px;
}
@ -80,21 +82,6 @@
min-height: 28px;
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 {
list-style-type: none;