Crop только что добавил картинку

Question

Я использую для предварительного просмотра файла bootstrap-fileinput.js автор Arnold Daniels. И для обрезки jquery.Jcrop.js Келли Халмэн.

bootstrap-fileinput для просмотра в режиме реального времени только что выбраного изображения, вставить в изображение src URL-адрес закодированных данных. Что-то вроде этого data:image/png;base64,iVBORw.......

Когда пользователь выбирает фотографию и получает предварительный просмотр в прямом эфире, я хотел разрешить их обрезать это изображение. Я попытался сделать это с помощью дополнительной кнопки: когда пользователь выбрал изображение, он получит предварительный просмотр в реальном времени, а когда они нажмут кнопку «обрезать», то для просто добавленного изображения будет инициализирован сценарий Jcrop. ($img_wrapper.find('img').Jcrop({});). И это работает, все отлично.

Но когда я пытаюсь сделать то же самое, не нажимая кнопку «обрезать», но автоматически после выбора файла, он не работает. Насколько я понимаю, jQuery не видит нового изображения.
Я пробовал с событием on.('click', func..., и это не работает. Затем я нашел в документации (http://jasny.github.io/bootstrap/javascript/#fileinput), что Jcrop предоставляет свой собственный слушатель on.('change.bs.fileinput', funct..., но он все еще не работает. Так что с кнопкой «crop» отлично работает, автоматически не работает, почему?

---

Так, что, как он работает: (попробуйте выберите изображение, нажмите "урожай", и вы можете обрезать изображение) http://jsfiddle.net/8f44yo9v/2/

Но тот путь, не работает: http://jsfiddle.net/o7tbr6mo/

Answer 1

Найдено (не лучшее) решение для этого.

В библиотеке bootstrap-fileinput.js, в строке №86, объявлена ​​переменная var $img = $('<img>'), это изображение DOM, которое будет добавлено как миниатюра для предварительного просмотра в реальном времени. Поэтому в конце этой функции мы можем добавить инициализацию для этого изображения.

if (window.location.pathname == '/add_tour') { 
     $img.Jcrop({ 
     aspectRatio: 16/9, 
     bgColor: '#3598DC', 
     setSelect: [$img.width(), 0, 0, 0], 
     minSize: [250, 0] 
     }); 
    } 

И это сработает. Но как я думаю, это не лучшая идея, чтобы изменить код в библиотеке начальной загрузки. Но получить объект $ img из этого файла, в другой JS-код, я не знаю, как это сделать.

Answer 2

Элемент изображения еще не создан, когда bootstrap-fileinput запускает «change.bs.fileinput».

Вы можете создать цикл ждать элемента:

$('input[type="file"]').on('change.bs.fileinput', function() { 
    var checkExist = setInterval(function() { 
     if ($('.fileinput-preview img').length) { 
      $('.fileinput-preview img').Jcrop({}); 
      clearInterval(checkExist); 
     } 
    }, 100); 
}); 

PS: Вы можете проверить для бесконечных циклов в случае не создается элемент.