Question

我在网站上有两个不同的部分用于上传图片，其中一个用于横幅，另一个用于个人资料图片。它们的尺寸也不同。上传图片可在覆盖页面中进行。

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

我想要的是，当用户上传照片然后取消照片时，所有内容都将消失。现在，如果用户在横幅照片中上传照片，然后将其取消，则当我们回到上传图像的叠加层时，该照片仍然可用。同样，如果用户单击个人资料图片，它将再次显示横幅照片及其尺寸。

我希望当用户单击“取消”按钮（在我的代码中为.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”错误。

有人可以帮我吗？我非常感谢您的提前帮助。

Answer 1

使用$('.croppie').cropit('destroy');而不是重新提取。

Answer 2

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

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

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

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

销毁或重置图像裁剪

2 个答案: