Сброс croppie - плагин обрезки изображения jQuery

Question

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

Не похоже, что есть простой способ сделать это. Документация croppie очень ограничена, и я могу найти только 2 возможных решения. Оба из которых я не могу заставить работать:

1. Вызов функции destroy() - к сожалению, это удаляет всю разметку, которая croppie добавляет, чтобы сделать работу скрипта. Как только он уничтожен, я не вижу способа его повторной инициализации.

2. Используйте встроенную функцию bind, чтобы установить атрибут url в пустое значение - это было предложение на странице gitub croppie. Он удаляет изображение, однако он не позволяет пользователю выбирать новое изображение. Пользователь может щелкнуть поле загрузки и выбрать файл изображения, но как только они нажмут, изображение не будет помещено в область обрезки. Похоже, скрипт перестает работать с функцией readFile, но не создает никаких консольных ошибок.

Вот сценарий, я использую сейчас, что позволяет выбрать изображение, удалить изображение, но это не позволит вам выбрать новое изображение:

https://jsfiddle.net/austin350s10/y7yby06b/

Если у кого-то есть идея, как заставить это работать так, как я думал, буду благодарен!

Answer 1

Решение номер 2 из моего оригинального сообщения работало отлично. Проблема заключалась в том, что я пытался выбрать одно и то же изображение после его удаления. Поскольку входной файл еще имел ссылку на исходное изображение, событие изменения ввода никогда не срабатывало. Как только я выбираю другое изображение, все работает нормально.

Answer 2

Так как вы предложили в своем собственном ответе все, что вам нужно, это строка $('#upload').val(''); в вашем коде в функции сброса.

$(".reset").click(function() { 
 
    $('.upload-demo').removeClass('ready'); 
 
    $('#upload').val(''); // this will clear the input val. 
 
    $uploadCrop.croppie('bind', { 
 
     url : '' 
 
    }).then(function() { 
 
     console.log('reset complete'); 
 
    }); 
 
});

После этого вы можете загрузить то же изображение снова.

Answer 3

Ваш код помог мне. Большое спасибо.

https://jsfiddle.net/y7yby06b/8/

$(".reset").click(function() { 

$('.upload-demo').removeClass('ready'); 
$("#upload-demo").html(""); 
$uploadCrop=null; 

$uploadCrop = $('#upload-demo').croppie({ 
     viewport: { 
      width: 146, 
      height: 146, 
      type: 'square' 
     }, 
     boundary: { 
      width: 300, 
      height: 300 
     }, 
    }); 
    }) 

Кроме того: [. Переполнение стека является английский сайт]

$(".reset").trigger("click");