0

我有一个包含带有作物功能的图像上传器的 vue 应用程序。上传裁剪图片成功，取回裁剪后的图片URL。但问题是当用户需要重新上传他们的图像时，画布仍然显示旧图像。当用户取消并重新上传图像时也会发生这种情况。

<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);
    },
    cancel() {
      this.$emit('cancel-upload');
    },
  },
  mounted() {
    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');
      },
    });
  },
};
</script>

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

我已经尝试使用空字符串设置 initialImage 和 updatedImage ，但它仍然无法正常工作。取消或继续裁剪图像后我应该初始化什么？还是有另一种方法可以克服这个问题？我也使用了 vue watcher，但它仍然不起作用。唔。

4

0 回答 0