Question

我正在使用 vue-cropperjs 库，但是在运行代码时，我总是收到错误消息：

Uncaught TypeError: Cannot read property 'getCroppedCanvas' of undefined
Uncaught TypeError: Cannot read property 'replace' of undefined

我从这里使用了代码：

<template>

  <div id="app">
    <h2 style="margin: 0;">Vue CropperJS</h2>
    <hr/>
    <input type="file" name="image" accept="image/*"
           style="font-size: 1.2em; padding: 10px 0;"
           @change="setImage" />
    <br/>
    <div style="width: 400px; height:300px; border: 1px solid gray; display: inline-block;">
      <vue-cropper
          ref='cropper'
          :guides="true"
          :view-mode="2"
          drag-mode="crop"
          :auto-crop-area="0.5"
          :min-container-width="250"
          :min-container-height="180"
          :background="true"
          :rotatable="true"
          :src="imgSrc"
          alt="Source Image"
          :img-style="{ 'width': '400px', 'height': '300px' }">
      </vue-cropper>
    </div>
    <img :src="cropImg" style="width: 200px; height: 150px; border: 1px solid gray" alt="Cropped Image" />
    <br/>
    <br />

    <button @click="cropImage" v-if="imgSrc != ''" style="margin-right: 40px;">Crop</button>
  </div>

</template>

<script>
  import VueCropper from 'vue-cropperjs';
  export default {
    components: {
      VueCropper,
    },
    data() {
      return {
        imgSrc: '',
        cropImg: '',
      };
    },
    methods: {
      setImage(e) {
        const file = e.target.files[0];
        if (!file.type.includes('image/')) {
          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');
        }
      },
      cropImage() {
        // get image data for post processing, e.g. upload or setting image src
        this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
      },
    },
  };
</script>

此外，我使用NPM安装该库。

问题出在哪里？似乎不能同时识别这两个功能，但在哪里可以找到它们？它们应该已经在库中预定义了。

Answer 1

好像没有加载vue-cropper。

这只是暗中的一击，虽然应该可以，但是您可以尝试在模板中使用VueCropper而不是vue-cropper吗？

未捕获的TypeError：无法读取未定义[VueJs]的属性'getCroppedCanvas'

1 个答案: