seepur/resources/scripts/applications/home/components/ImagePicker.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="initialImage"
          :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
  },
  props: ["initialImage"],
  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>