Я получаю сообщение об ошибке, когда пытаюсь получить 50% изображения с помощью CropperJS.

Я хочу получить 50% изображения с помощью «cropperJS». Я создаю новый Image() и пытаюсь создать новый Cropper для дальнейшего получения холста. И я получаю сообщение об ошибке «Не удается прочитать свойство «insertBefore» из null», пожалуйста, помогите мне решить эту проблему. Или покажите мне, как я могу получить 50% изображения без «cropperJS». Заранее спасибо.

<template>
  <v-layout
    column
    justify-center
    align-center
  >
    <v-flex
      xs12
      sm8
      md6
    >
    <vue-dropzone 
      ref="myVueDropzone" 
      id="dropzone" 
      :options="dropzoneOptions"
      @vdropzone-success="vdropzoneSuccess"
    >
    </vue-dropzone>
    <v-img 
      :src="imgUrl" 
    >
    </v-img>
    </v-flex>
  </v-layout>
</template>

<script>
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
import Cropper from 'cropperjs'

export default {
  data: function () {
    return {
      imgUrl:'',
      dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { "My-Awesome-Header": "header value" }
      }
    }
  },
  components: {
    vueDropzone: vue2Dropzone
  },
  methods:{
    vdropzoneSuccess(file, response){
      this.imgUrl = file.dataURL
      var image = new Image()
      image.src = URL.createObjectURL(file)
      console.log(image)
      var cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        crop(event) {
          console.log(event.detail.x)
          console.log(event.detail.y)
          console.log(event.detail.width)
          console.log(event.detail.height)
        },
      })
      console.log(cropper)
    }
  }
}
</script>