如何正确销毁 cropper.js 以便下一批作物获得新图像？

Question

我有一个 vue 应用程序表单，它有一个通过 ant-design-vue 上传的图像上传器。我将这个图像上传器链接到一个新组件，该组件处理图像以在上传后使用 cropper.js 进行裁剪。第一次收割一切都很好并且工作得很好。但是当用户第二次需要更换照片并再次裁剪时，裁剪区域的图像仍然使用第一张图像。第三次上传会裁剪第二个区域，接下来会收到同样的效果。

这是我的代码结构：

<template>
  <div>
    <a-row :gutter="16">
      <img ref="image" :src="initialImage">
    </a-row><br />
    <a-row :gutter="16">
      <a-button type="primary" style="float: right;" @click="crop">Crop</a-button>
      <a-button style="float: right; margin-right: 5px;" @click="cancel">Cancel</a-button>
    </a-row>
  </div>
</template>

这是脚本和样式：

<script>
import Cropper from 'cropperjs';

export default {
  name: 'PostCropper',
  props: {
    uploadedImage: String,
  },
  data() {
    return {
      cropper: {},
      updatedImage: {},
      initialImage: this.uploadedImage,
    };
  },
  methods: {
    crop() {
      this.$emit('update-image', this.updatedImage);
    },
    cancel() {
      this.$emit('cancel-upload');
    },
    cropImage() {
      this.cropper = new Cropper(this.$refs.image, {
        autoCropArea: 1,
        cropBoxResizable: false,
        zoomOnTouch: true,
        zoomable: true,
        scalable: false,
        aspectRatio: 1,
        resizable: false,
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.updatedImage = canvas.toDataURL('image/png');
        },
      });
    },
  },
  watch: {
    uploadedImage() {
      this.cropper.destroy();
      this.initialImage = this.uploadedImage;
      this.cropImage();
    },
  },
  mounted() {
    this.cropImage();
  },
};
</script>

<style lang="scss">

.cropper-crop-box .cropper-view-box {
    border-radius:50%;
  }
</style>

问题出在这里：

          this.cropper = new Cropper(this.$refs.image, {
            autoCropArea: 1,
            cropBoxResizable: false,
            zoomOnTouch: true,
            zoomable: true,
            scalable: false,
            aspectRatio: 1,
            resizable: false,
            crop: () => {
              const canvas = this.cropper.getCroppedCanvas();
              this.updatedImage = canvas.toDataURL('image/png');
            },
          });

我已经销毁了 this.cropper 但仍然裁剪了相同的图像。我尝试通过 console.log 预览 this.cropper、this.image、this.initialImage、this.uploadedImage 的每个值，但它们都没有问题。它将在 this.uploadedImage 上携带新的价值是通过使用 vue watch 改变的。我不知道为什么只有上面的这个功能仍然带有相同的图像。有什么方法可以初始化 this.cropper 或者可以解决我的问题的方法，比如重新渲染这个子组件？

Answer 1

您可以通过给 Vue 元素一个键并更新键来刷新它们。例如，您要导入 PostCropper 组件的位置：

<PostCropper v-bind:key="refreshValue" />

然后在父元素的数据属性中分配一个名为 refreshValue 的属性并给它一个值，如 1。然后当您需要刷新组件时，您只需更改该值。这可能需要您从 PostCropper 组件向父组件发出一个事件，然后递增 refreshValue.

Answer 2

我有另一种方法可以销毁父组件中的子组件而不是销毁变量。通过使用 v-if 方法销毁导入的组件，它完美地工作了。

如何正确销毁 cropper.js 以便下一批作物获得新图像？

how to destroy cropper.js properly so that next crop will get new image?

javascript

vue.js

cropper

antd

cropperjs