You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.3 KiB
113 lines
3.3 KiB
<template>
|
|
<v-dialog @click:outside="cancelCropImage" content-class="mb-15" scrollable width="70%" v-model="isCropImageDialogActive" style="z-index:500">
|
|
<v-card class="border-radius-20 pt-12 cropper-card-height">
|
|
<v-spacer class="d-flex justify-end">
|
|
<v-btn icon @click="cancelCropImage" class="me-15 mb-9">
|
|
<v-icon>
|
|
mdi-close
|
|
</v-icon>
|
|
</v-btn>
|
|
</v-spacer>
|
|
<v-spacer class="d-flex justify-center pb-15">
|
|
<cropper
|
|
class="cropper"
|
|
ref="cropper"
|
|
:src="cropImagePreview"
|
|
:stencil-component="$options.components.CircleStencil"
|
|
/>
|
|
</v-spacer>
|
|
<v-spacer class="d-flex justify-center justify-sm-end mb-11">
|
|
<v-btn class="me-3" width="110px" @click="cancelCropImage" text color="primary">
|
|
{{ $t("userProfile.cropReset") }}
|
|
</v-btn>
|
|
<v-btn class="me-15 border-radius-16" width="110px" @click="cropImage" color="primary">
|
|
{{ $t("userProfile.crop") }}
|
|
</v-btn>
|
|
</v-spacer>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
<script>
|
|
import { CircleStencil, Cropper } from 'vue-advanced-cropper';
|
|
import 'vue-advanced-cropper/dist/style.css';
|
|
export default {
|
|
name: "cropImageDialog",
|
|
components: {
|
|
CircleStencil, Cropper
|
|
},
|
|
props: {
|
|
isCropImageDialogActive: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: false,
|
|
},
|
|
cropImagePreview: {
|
|
type: String,
|
|
required: true,
|
|
default: '',
|
|
},
|
|
},
|
|
methods: {
|
|
cancelCropImage() {
|
|
const deleteFile = this.cropImagePreview.split('/')
|
|
const filename = deleteFile.pop()
|
|
this.$axios.delete(`/users/images?filename=${filename}`)
|
|
.then(response => {})
|
|
.catch(error => console.log(error))
|
|
this.$emit('close-crop-dialog')
|
|
},
|
|
cropImage() {
|
|
const result = this.$refs.cropper.getResult()
|
|
const resultSplit = result.image.src.split('/')
|
|
const fileDetails = resultSplit[resultSplit.length-1].split('.')
|
|
const fileURL = result.canvas.toDataURL('image/'+fileDetails[1])
|
|
const file = this.dataURLtoFile(fileURL,fileDetails[0]+'.'+fileDetails[1])
|
|
const payload = new FormData()
|
|
payload.append('file',file)
|
|
this.$axios.post('/users/images',payload)
|
|
.then(response => {
|
|
const pictureURL = response.data.image.url
|
|
this.$emit('upload-image-success',pictureURL)
|
|
})
|
|
.catch(error => console.log(error))
|
|
},
|
|
dataURLtoFile(dataurl, filename) {
|
|
let arr = dataurl.split(','),
|
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[1]),
|
|
n = bstr.length,
|
|
u8arr = new Uint8Array(n);
|
|
while(n--){
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new File([u8arr], filename, {type:mime});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.cropper {
|
|
width: 85%;
|
|
@media screen and (max-width: 600px) {
|
|
min-height: 164px;
|
|
}
|
|
@media screen and (min-width: 600px) and (max-width: 960px) {
|
|
min-height: 303px;
|
|
}
|
|
@media screen and (min-width: 961px) {
|
|
min-height: 538px;
|
|
}
|
|
}
|
|
.cropper-card-height {
|
|
@media screen and (max-width: 600px) {
|
|
min-height: 515px;
|
|
}
|
|
@media screen and (min-width: 600px) and (max-width: 960px) {
|
|
min-height: 717px;
|
|
}
|
|
@media screen and (min-width: 961px) {
|
|
min-height: 1000px;
|
|
}
|
|
}
|
|
|
|
</style>
|