Javascript 销毁或重置图像复制

我有两个不同的部分用于上传网站中的图像，其中一个用于横幅，另一个用于个人资料图片。它们也有不同的维度。上传图像在覆盖页面中工作

我在我的服务器中添加了图像裁剪，根据我的代码，当用户单击横幅图像时，它会自动将其尺寸设置为图像裁剪，当用户单击配置文件图片时，它会将配置文件图片大小设置为图像裁剪

我想要的是，当用户上传一张照片，然后取消它，一切都会消失。现在，如果用户上传横幅照片中的照片，然后取消它，当我们返回到上传图像的覆盖时，照片仍然可用。此外，如果用户点击个人资料图片，它会再次显示横幅及其尺寸的照片

我希望当用户点击取消按钮（在我的代码中是.fa次）时，上传的图像及其维度的所有内容都将被删除。然后，如果用户单击另一个部分（个人资料照片或横幅），用户将看到一个具有正确维度的新页面

这是我的代码，这是代码，当用户点击浏览按钮选择上传的图像时

this.body.addClass("overlay--active");
var imageBody = $(e.target).closest(".icon");
this.height = imageBody.attr("data-height");
this.width = imageBody.attr("data-width");


var crop = new Croppie(document.getElementById('js-image-editor'), {
    enableExif: true,
    showZoomer: true,
    viewport: { width: this.width, height: this.height, type: 'square'},
    boundary: { width: this.width, height: this.height}
});

    function readFile(input) {
      if (input.files && input.files[0]) {
              var reader = new FileReader();

              reader.onload = function (e) {
          $('.section').addClass('ready');
                // crop.croppie('bind', {
                crop.bind({
                  url: e.target.result
                }).then(function(){
                  console.log('jQuery bind complete');
                });

              }

              reader.readAsDataURL(input.files[0]);
          }
          else {
            swal("Sorry - you're browser doesn't support the FileReader API");
        }
    }


    $('.button-upload-image').on('change', function () { readFile(this); });



    $('.fa-save').on('click', function (ev) {
       crop.result ({
        type: 'canvas',
        size: 'viewport'
      }).then(function () {
        console.log('upload image complete');
      });
    });


    $(".fa-times").click(function() {
      $('.section').removeClass('ready');
      crop.bind ({
        url: ''
      }).then(function(){
        console.log('reset complete');
      });
    })

正如您在上一块中看到的，我尝试重置图像裁剪，但它不起作用。每次出现“Croppie:不能多次初始化Croppie”错误时

---

有人能帮我吗？我真的很感谢你事先的帮助

使用

$（'.cropie'）.cropit（'destroy'）我遇到的销毁问题是，一旦销毁实例，然后再重新初始化croppie（例如，在用户取消并决定再次启动之后），它会给出一个类型错误，因为包含html元素的javascript对象被删除

其他人已经找到了一种解决方法。但在我的案例中，我发现一个更好的解决方案是利用croppie的一个实例，并使用css/jquery切换croppie容器的可见性

话虽如此。我认为您遇到的主要问题是，在取消时，您试图重新绑定到一个空URL，而不是将文件上载的值设置为零。用这个代替

$(".fa-times").click(function() { 
    $('.button-upload-image').val('');
});

croppie（“销毁”）而不是cropit:）