Question

在单击文件上传输入并选择要裁剪的图像后，裁剪的图像裁剪器将以可重复使用的模式出现。那里没有问题。

当我关闭模态并销毁croppie实例时，问题就来了。我本质上希望能够关闭模式，单击文件上传输入，选择一个新图像，并使该新图像出现在要裁剪的模式中。我得到的是一系列不同的东西：

有时该模式会打开，但将具有被选择为裁剪的第一个图像，而不是刚刚选择的最后一个更新图像
有时一切正常，新选择的图像显示在图像裁切器模式中，但是图像在调整大小时会忽略裁切器的边界（我最初用setTimeOut（）解决了调整大小的问题）
有时模式根本不会打开。

注意：在化身作物组件上，setTimeOut围绕着Croppies设置，以允许打开模态后绑定图像。 This is a fix for what is stated in the Croppie docs:

Croppie依赖于调用bind方法时容器是否可见。当您的裁剪组件位于未显示的模态中时，这可能是一个问题。让我们以引导程序模式为例。

View

Vue.component('modal', {
  template: '#modal-template',
  props: ['show'],
  methods: {
    close: function() {
      this.$emit('close');
      this.$emit('destroyUrl');
    }
  }
});

Vue.component('avatar-crop', {
  template: '#avatar-crop-template',
  props: ['show', 'imgUrl'],
  data() {
    return {
      status: '',
      submitted: false,
      message: '',
      croppie: null,
      image: null
    }
  },
  updated: function() {
    this.image = this.imgUrl;
    setTimeout(function() {

      this.setUpCroppie();
    }.bind(this), 3000)

  },
  methods: {
    close: function() {
      this.$emit('close');
      this.croppie.destroy();
    },
    setUpCroppie: function() {
      let element = document.getElementById('croppie');

      this.croppie = new Croppie(element, {
        viewport: {
          width: 200,
          height: 200
        },
        boundary: {
          width: 300,
          height: 300
        },
        showZoomer: true,
        enforceBoundary: true,
      });

      this.croppie.bind({
        url: this.image
      });
    },
  }
});

const app = new Vue({
  el: '#app',

  data() {
    return {
      showModal: false,
      url: null
    }
  },
  methods: {
    toggleModal: function() {
      this.showModal = !this.showModal;
    },
    onFileChange(e) {
      const file = e.target.files[0];
      this.url = URL.createObjectURL(file);
      this.toggleModal();
    },
    urlDestroy() {
      this.url = null;
    }
  }
});

.bg-smoke-light {
  background: rgba(0, 0, 0, 0.7);
}

在接近的问题上重置图像裁剪模式

0 个答案: