销毁或重置图像裁剪答案

【问题标题】：destroy or reset image croppie销毁或重置图像裁剪
【发布时间】：2018-12-03 11:57:56
【问题描述】：

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

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

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

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

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

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”的错误。

有人可以帮我解决这个问题吗？我非常感谢您提前提供的帮助。

【问题讨论】：

标签： javascript jquery image crop

【解决方案1】：

使用$('.croppie').cropit('destroy');，而不是重新启动。

【讨论】：

croppie('destroy') 不是cropit :)

【解决方案2】：

我遇到的destroy问题是，一旦你销毁了实例，然后你再去重新初始化croppie（比如在用户取消然后决定再去一次之后），它会给出一个类型错误，因为javascript对象包含 html 元素的内容已被删除。

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

话虽如此。我认为您遇到的主要问题是，取消后，您尝试重新绑定到空 URL，而不是将文件上传的值设置为空。改用这个。

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

【讨论】：