seepur/resources/scripts/applications/home/components/ImagePicker.vue

96 lines
2.4 KiB
Vue

<template>
<div class="columns has-text-centered">
<div class="column">
<figure class="image is-avatar is-inline-block is-light">
<croppa
v-model="croppa"
initial-image="/images/default-child-avatar.png"
:prevent-white-space="true"
:show-remove-button="false"
:disable-drag-to-move="isDefaultImage"
@new-image="isDefaultImage=false;zoomState=1"
></croppa>
</figure>
</div>
<div class="column is-flex-column m-t-md m-b-md m-r-lg">
<button
type="button"
class="button is-rounded is-primary"
v-if="true"
@click="croppa.chooseFile()"
>
<i class="fa fa-fw fa-refresh"></i> Change Photo
</button>
<button
type="button"
class="button is-rounded is-danger"
v-if="true"
:disabled="isDefaultImage"
@click="croppa.refresh();isDefaultImage=true"
>
<i class="fa fa-fw fa-trash"></i> Remove Image
</button>
<div class="is-flex">
<button
type="button"
class="button is-rounded is-outlined"
:disabled="isDefaultImage"
@click="zoomState--"
>
<i class="fa fa-fw fa-minus"></i>
</button>
<input type="range" min="1" max="100" v-model="zoomState" :disabled="isDefaultImage" />
<button
type="button"
class="button is-rounded is-outlined"
:disabled="isDefaultImage"
@click="zoomState++"
>
<i class="fa fa-fw fa-plus"></i>
</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import Croppa from "vue-croppa";
export default {
name: "ImagePicker",
components: {
Croppa: Croppa.component
},
watch: {
zoomState: function(newVal, oldVal) {
if (newVal < oldVal) {
this.croppa.zoomOut();
console.log(this.croppa.getChosenFile());
} else {
this.croppa.zoomIn();
}
}
},
created() {
// this.pickerController = {
// generateDataUrl(mimeType: string, compression: number) {
// return this.croppa.generateDataUrl(mimeType, compression);
// }
// };
},
methods: {
generateDataUrl(mimeType: string, compression: number) {
return this.croppa.generateDataUrl(mimeType, compression);
}
},
data() {
return {
zoomState: 1,
isDefaultImage: true,
croppa: {}
};
}
};
</script>