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

然后在父元素的data属性中分配一个名为refreshValue的属性，并为其提供一个类似于1的值。然后，当您需要刷新组件时，只需更改该值即可。这可能需要您从PostCropper组件向父对象发出一个事件，然后递增refreshValue。

Answer 2

我有另一种销毁父部件中的子部件而不是销毁变量的方法。通过使用v-if方法销毁导入的组件，效果很好。

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

2 个答案: