97 lines
2.4 KiB
Vue
97 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>
|