<div class="col-md-6 text-center">
    <section class="cropper-area">
            <div class="img-cropper">
            <VueCropper ref="cropper" :aspect-ratio="16 / 9" :src="imgSrc" preview=".preview"/>
            </div>
            <div class="actions p-3">
                <button @click.prevent="cropImage" class="rounded " style="background-color: var(--bs-primary); color:white; border-color: var(--bs-primary);"> Crop
                </button>
            </div>
        </section>
    </div>
    <div class="col-sm-6 text-center">
        <section class="preview-area">
            <p>Preview </p>
            <div class="cropped-image">
            <img v-if="cropImg" :src="cropImg" alt="Cropped Image" class="rounded-circle w-100 " />
            <div v-else class="crop-placeholder" />
            </div>
        </section>
</div>
        

import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
import Prism from 'prismjs'
export default {
  name: 'image-cropper',
  components: {
    VueCropper
  },
  data () {
    return {
      imgSrc: require('@/assets/images/plugins/01.jpg'),
      cropImg: '',
      data: null
    }
  },
  methods: {
    cropImage () {
      // get image data for post processing, e.g. upload or setting image src
      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL()
    },
    flipX () {
      const dom = this.$refs.flipX
      let scale = dom.getAttribute('data-scale')
      scale = scale ? -scale : -1
      this.$refs.cropper.scaleX(scale)
      dom.setAttribute('data-scale', scale)
    },
    flipY () {
      const dom = this.$refs.flipY
      let scale = dom.getAttribute('data-scale')
      scale = scale ? -scale : -1
      this.$refs.cropper.scaleY(scale)
      dom.setAttribute('data-scale', scale)
    },
    getCropBoxData () {
      this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4)
    },
    getData () {
      this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4)
    },
    move (offsetX, offsetY) {
      this.$refs.cropper.move(offsetX, offsetY)
    },
    reset () {
      this.$refs.cropper.reset()
    },
    rotate (deg) {
      this.$refs.cropper.rotate(deg)
    },
    setCropBoxData () {
      if (!this.data) return
      this.$refs.cropper.setCropBoxData(JSON.parse(this.data))
    },
    setData () {
      if (!this.data) return
      this.$refs.cropper.setData(JSON.parse(this.data))
    },
    setImage (e) {
      const file = e.target.files[0]
      if (file.type.indexOf('image/') === -1) {
        alert('Please select an image file')
        return
      }
      if (typeof FileReader === 'function') {
        const reader = new FileReader()
        reader.onload = (event) => {
          this.imgSrc = event.target.result
          // rebuild cropperjs with the updated source
        //   this.$refs.cropper.replace(event.target.result)
        }
        reader.readAsDataURL(file)
      } else {
        alert('Sorry, FileReader API not supported')
      }
    },
    showFileChooser () {
      this.$refs.input.click()
    },
    zoom (percent) {
      this.$refs.cropper.relativeZoom(percent)
    }
  },
  mounted () {
    Prism.highlightAll()
  }