0

我有一个 vue 应用程序表单，其中有一个图像上传器。它有子组件，其中带有从ant-design上传上传图像后裁剪图像的功能。它在上传和裁剪过程中正常工作。问题是它仅在用户首次上传图像时才有效。但是在第二次上传图像时，裁剪画布仍然使用需要裁剪的第一张图像。所以我破坏了关闭或保存的功能，它this.cropper.destroy()以某种方式工作了一点，但仍然存在第二次上传将使用第一张图片，第三次上传将使用第二张图片，第四次上传将使用第三张图片等等的错误。如果此错误仍然存​​在，它将没有用户友好性。在这里，我将显示我的子组件代码，我希望它在组件销毁时完全销毁。

<template>
<div>
    <a-row :gutter="16">
        <a-col :span="12">
            <img ref="image" :src="initialImage">
        </a-col>
        <a-col :span="12" align="center">
            <p><strong>Preview</strong></p>
            <img :src="updatedImage" class="preview-image">
        </a-col>
    </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: {},
      image: {},
      initialImage: this.uploadedImage,
    };
  },
  methods: {
    crop() {
      this.$emit('update-image', this.updatedImage);
      this.cropper.destroy();
    },
    cancel() {
      this.$emit('cancel-upload');
      this.cropper.destroy();
    },
    cropImage() {
      this.image = this.$refs.image;
      this.cropper = new Cropper(this.image, {
        zoomable: false,
        scalable: false,
        aspectRatio: 1,
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.updatedImage = canvas.toDataURL('image/png');
        },
      });
    },
  },
  watch: {
    uploadedImage() {
      this.initialImage = this.uploadedImage;
      this.cropImage();
    },
  },
  mounted() {
    this.cropImage();
  },
};
</script>

<style scoped>
  .preview-image {
    border-radius:100px;
    width:150px;
    height:150px;
  }
</style>

实际上我需要做什么才能this.cropper在页面关闭时完全破坏？或者我能做些什么来克服这个问题？

4

2 回答 2

0 
  watch: {
    uploadedImage() {
      this.initialImage = this.uploadedImage;
      this.cropper.destroy(); //==> use destroy function here
      this.cropImage();
    },
  },
于 2019-12-13T09:55:26.413 回答
0

我没有销毁裁剪器，而是使用 v-if 销毁了整个子组件，因此当单击按钮时，它将重新安装组件

于 2021-07-30T08:58:40.190 回答