<template>
  <vue-cropper-js
    ref="cropper"
    :guides="true"
    :view-mode="2"
    drag-mode="crop"
    :auto-crop-area="0.5"
    :min-container-width="250"
    :min-container-height="180"
    :background="false"
    :rotatable="true"
    :src="imgSrc"
    alt="Source Image"
    :img-style="{ 'width': '400px', 'height': '300px' }"
  ></vue-cropper-js>
</template>

<script>
import VueCropperJs from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: { VueCropperJs },
  props: {
    imgSrc: String,
  },
  watch: {
    imgSrc() {
      this.$refs.cropper.replace(this.imgSrc);
    },
  },
  methods: {
    getDataURL() {
      return this.$refs.cropper.getCroppedCanvas().toDataURL();
    },
    clear() {
      this.$refs.cropper.clear();
    }
  },
}
</script>