уничтожить или сбросить изображение кроппи - PullRequest
Новая
       15

уничтожить или сбросить изображение кроппи

0 голосов
/ 25 июня 2018

У меня есть два разных раздела для загрузки изображений на веб-сайте, один для баннера, а другой для изображения профиля. У них тоже разные измерения. загрузка изображения работает на оверлейной странице.

Я добавил изображение croppie на свой сервер и в соответствии с моими кодами, когда пользователь нажимает на изображение баннера, оно автоматически устанавливает его размер на изображение croppie, а когда пользователь нажимает на изображение профиля, он устанавливает размер изображения профиля равным изображение кроппи.

Все, что я хочу, это когда пользователь загрузит фотографию, а затем отменит ее, все исчезнет. Теперь, если пользователь загрузит фотографию в баннерную фотографию, а затем отменит ее, фотография все еще будет доступна, когда мы вернемся к оверлею загрузки изображения. Также, если пользователь нажимает на изображение профиля, оно снова показывает фотографию баннера с его размером.

Я хочу, чтобы, когда пользователь нажимал кнопку отмены (в моих кодах .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 более одного раза».

Кто-нибудь может мне помочь в этом? Я очень благодарен за вашу помощь заранее.

Ответы [ 2 ]

0 голосов
/ 11 марта 2019

Проблема, с которой я столкнулся при разрушении, состоит в том, что после того, как вы уничтожаете экземпляр, затем вы переинициализируете croppie после этого (скажем, после того, как пользователь отменяет, затем решает сделать еще один переход), это выдает ошибку типа, потому что объект javascriptсодержащий элементы HTML был удален.

Есть обходной путь, который другие нашли для этого.Но я нашел лучшее решение в моем случае - использовать один экземпляр croppie и переключать видимость контейнера croppie с помощью css / jquery.

Это, как говорится.Я думаю, что основная проблема, с которой вы столкнулись, заключается в том, что после отмены вы пытаетесь выполнить повторную привязку к пустому URL-адресу, а не устанавливать значение загрузки файла равным нулю.Используйте это вместо. 

$(".fa-times").click(function() { 
    $('.button-upload-image').val('');
});
0 голосов
/ 31 октября 2018

используйте $('.croppie').cropit('destroy');, затем снова используйте.

...