akkoma-fe/src/components/image_cropper/image_cropper.js

132 lines
3.2 KiB
JavaScript
Raw Normal View History

2019-02-07 08:05:59 +00:00
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
2020-10-20 18:18:23 +00:00
import { library } from '@fortawesome/fontawesome-svg-core'
import {
2020-10-20 21:01:28 +00:00
faCircleNotch
2020-10-20 18:18:23 +00:00
} from '@fortawesome/free-solid-svg-icons'
library.add(
2020-10-20 21:01:28 +00:00
faCircleNotch
2020-10-20 18:18:23 +00:00
)
2019-02-07 08:05:59 +00:00
const ImageCropper = {
props: {
trigger: {
2019-02-08 17:13:23 +00:00
type: [String, window.Element],
2019-02-07 08:05:59 +00:00
required: true
},
2019-02-09 02:59:33 +00:00
submitHandler: {
type: Function,
required: true
},
2019-02-07 08:05:59 +00:00
cropperOptions: {
type: Object,
default () {
return {
aspectRatio: 1,
autoCropArea: 1,
viewMode: 1,
movable: false,
zoomable: false,
guides: false
}
}
},
mimes: {
type: String,
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
},
2019-02-09 02:59:33 +00:00
saveButtonLabel: {
2019-02-08 16:42:02 +00:00
type: String
2019-02-07 08:05:59 +00:00
},
2019-03-19 01:19:42 +00:00
saveWithoutCroppingButtonlabel: {
type: String
},
2019-02-09 02:59:33 +00:00
cancelButtonLabel: {
2019-02-08 16:42:02 +00:00
type: String
2019-02-07 08:05:59 +00:00
}
},
data () {
return {
cropper: undefined,
dataUrl: undefined,
2019-02-09 02:59:33 +00:00
filename: undefined,
2020-12-02 10:46:31 +00:00
submitting: false
2019-02-07 08:05:59 +00:00
}
},
2019-02-08 16:42:02 +00:00
computed: {
2019-02-09 02:59:33 +00:00
saveText () {
2019-02-08 16:42:02 +00:00
return this.saveButtonLabel || this.$t('image_cropper.save')
2019-02-09 02:59:33 +00:00
},
2019-03-19 01:19:42 +00:00
saveWithoutCroppingText () {
return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
},
2019-02-09 02:59:33 +00:00
cancelText () {
return this.cancelButtonLabel || this.$t('image_cropper.cancel')
2019-02-08 16:42:02 +00:00
}
},
2019-02-07 08:05:59 +00:00
methods: {
destroy () {
2019-02-08 17:07:25 +00:00
if (this.cropper) {
this.cropper.destroy()
}
2019-02-07 08:05:59 +00:00
this.$refs.input.value = ''
this.dataUrl = undefined
2019-02-09 02:59:33 +00:00
this.$emit('close')
2019-02-07 08:05:59 +00:00
},
2019-03-22 17:00:58 +00:00
submit (cropping = true) {
2019-02-09 02:59:33 +00:00
this.submitting = true
2019-03-22 17:00:58 +00:00
this.submitHandler(cropping && this.cropper, this.file)
2019-03-19 01:19:42 +00:00
.then(() => this.destroy())
.finally(() => {
this.submitting = false
})
},
2019-02-07 08:05:59 +00:00
pickImage () {
this.$refs.input.click()
},
createCropper () {
this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
},
getTriggerDOM () {
return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
},
readFile () {
const fileInput = this.$refs.input
if (fileInput.files != null && fileInput.files[0] != null) {
this.file = fileInput.files[0]
2019-02-08 17:13:23 +00:00
let reader = new window.FileReader()
reader.onload = (e) => {
this.dataUrl = e.target.result
2019-02-09 02:59:33 +00:00
this.$emit('open')
}
reader.readAsDataURL(this.file)
this.$emit('changed', this.file, reader)
}
2019-02-07 08:05:59 +00:00
}
},
mounted () {
// listen for click event on trigger
const trigger = this.getTriggerDOM()
2019-02-07 08:05:59 +00:00
if (!trigger) {
this.$emit('error', 'No image make trigger found.', 'user')
} else {
trigger.addEventListener('click', this.pickImage)
}
// listen for input file changes
const fileInput = this.$refs.input
fileInput.addEventListener('change', this.readFile)
},
2022-03-24 11:50:22 +00:00
beforeUnmount: function () {
// remove the event listeners
const trigger = this.getTriggerDOM()
if (trigger) {
trigger.removeEventListener('click', this.pickImage)
}
const fileInput = this.$refs.input
fileInput.removeEventListener('change', this.readFile)
2019-02-07 08:05:59 +00:00
}
}
export default ImageCropper