I'm using for file-input preview bootstrap-fileinput.js by Arnold Daniels. And for cropping jquery.Jcrop.js by Kelly Hallman.
bootstrap-fileinput for live-preview just selected image, insert in image src encoded data URL. Something like this data:image/png;base64,iVBORw.......
When the user selects the photo and get the live-preview, I wanted to allow them to crop that image. I tried to do that with an additional button: When the user chose an image they'd get a live-preview, and when they click on button "crop", then for just added image will initialized Jcrop script. ($img_wrapper.find('img').Jcrop({});). And it works, all fine.
But when I try to do the same, without pressing "crop" button, but automatically after file selected, it doesn't work. As I understand, jQuery doesn't see the new image.
I tried with event on.('click', func... and it's dont work. Then i found in documentation (http://jasny.github.io/bootstrap/javascript/#fileinput) that Jcrop provides her own listener on.('change.bs.fileinput', funct... but it still does not work. So with button "crop" works fine, automatically doesn't work, why?
So, that way it works: (try select image, press "crop", and you can crop image) http://jsfiddle.net/8f44yo9v/2/
But that way, doesn't work: http://jsfiddle.net/o7tbr6mo/
Found (not the best) solution to do that.
In library bootstrap-fileinput.js, on line №86, there's declared variable var $img = $('<img>'), this is the image DOM which will be added like thumbnail for live preview. So at the end, of that function we can added out initialize for that image.
if (window.location.pathname == '/add_tour') {
$img.Jcrop({
aspectRatio: 16/9,
bgColor: '#3598DC',
setSelect: [$img.width(), 0, 0, 0],
minSize: [250, 0]
});
}
And it would work. But how i think, it's not the best idea to change code in bootstrap library. But get $img object from that file, to other JS code, i dont know how.