IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

combine duplicate image uploader methods after merge

Browse Source
This commit is contained in:
Alina Beck 2020-02-19 10:46:27 +01:00
parent 6aecbd6c6d
commit 7d7b35d069
1 changed files with 16 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
webapp/components/TeaserImage/TeaserImage.vue
View File

@ -55,7 +55,6 @@ export default {
file: null,
showCropper: false,
isLoadingImage: false,
imageAspectRatio: null,
}
},
methods: {
@ -78,46 +77,29 @@ export default {
imageElement.src = URL.createObjectURL(file)
this.cropper = new Cropper(imageElement, { zoomable: false, autoCropArea: 0.9 })
},
cropImage() {
this.isLoadingImage = true
const canvas = this.cropper.getCroppedCanvas()
canvas.toBlob(blob => {
const imageAspectRatio = canvas.width / canvas.height
const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
this.$emit('addTeaserImage', croppedImageFile)
this.$emit('addImageAspectRatio', imageAspectRatio)
this.setupPreview(canvas.toDataURL())
})
},
deleteImage() {
this.clearImages()
},
cropImage() {
this.showCropper = false
this.isLoadingImage = true
if (this.file.type === 'image/jpeg') {
this.uploadJpeg()
const canvas = this.cropper.getCroppedCanvas()
canvas.toBlob(blob => {
const imageAspectRatio = canvas.width / canvas.height
const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
this.$emit('addTeaserImage', croppedImageFile)
this.$emit('addImageAspectRatio', imageAspectRatio)
this.$emit('cropInProgress', false)
this.setupPreview(canvas.toDataURL())
}, 'image/jpeg')
} else {
this.uploadOtherImageType()
const imageAspectRatio = this.file.width / this.file.height || 1.0
const croppedImageFile = this.file
this.setupPreview(this.file.dataURL)
this.$emit('addTeaserImage', croppedImageFile)
this.$emit('addImageAspectRatio', imageAspectRatio)
this.$emit('cropInProgress', false)
}
},
uploadOtherImageType() {
this.imageAspectRatio = this.file.width / this.file.height || 1.0
this.image = new Image()
this.image.src = this.file.dataURL
this.setupPreview()
this.emitImageData(this.file)
},
uploadJpeg() {
const canvas = this.cropper.getCroppedCanvas()
canvas.toBlob(blob => {
this.imageAspectRatio = canvas.width / canvas.height
this.image = new Image()
this.image.src = canvas.toDataURL()
this.setupPreview()
const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
this.emitImageData(croppedImageFile)
}, 'image/jpeg')
this.closeCropper()
},
setupPreview(url) {
@ -129,20 +111,11 @@ export default {
this.showCropper = false
this.cropper.destroy()
},
setupPreview() {
this.image.classList.add('thumbnail-preview')
this.thumbnailElement.appendChild(this.image)
},
cancelCrop() {
if (this.oldImage) this.thumbnailElement.appendChild(this.oldImage)
this.showCropper = false
this.$emit('cropInProgress', false)
},
emitImageData(imageFile) {
this.$emit('addTeaserImage', imageFile)
this.$emit('addImageAspectRatio', this.imageAspectRatio)
this.$emit('cropInProgress', false)
},
},
}
</script>