当我尝试使用 cropperJS 获取 50% 的图像时出现错误

Question

我想用 'cropperJS' 获得图像的 50%。我创建了一个新的 Image() 并尝试创建新的 Cropper 以进一步获取 canvas。我收到错误“无法读取属性 'insertBefore' of null”，请帮我解决这个问题。或者告诉我如何在没有 'cropperJS' 的情况下获得 50% 的图像。提前致谢。

<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>

Answer 1

首先 Cropper.js 接受 DOM node 作为第一个参数，所以你应该传递 DOM节点。根据文档，此 DOM 节点应包含在 <div></div> 中。只有当图像 loaded 时，才应该初始化 Cropper.js。

<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>
    <div>
      <img
        ref="img"
        :src="imgUrl" 
      />
    </div>
    </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)
        image.onload = () => {
          var cropper = new Cropper(this.$refs.img, {
            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)
            },
          })
        }

      }
    }
  }
</script>

当我尝试使用 cropperJS 获取 50% 的图像时出现错误

I get the error when i try get 50% of the image with cropperJS

javascript

vue.js

cropperjs

vue-dropzone