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.......
So, 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://ift.tt/1vp18Kg) that Jcrop provides her own listener on.('change.bs.fileinput', funct... but it still does not work. So with button "crop" work fine, automatically dont work, why? :/
So,that way it works: (try select image, press "crop", and you can crop image) http://ift.tt/1HAouq6
But that way, dont work: http://ift.tt/1ImyIsi
Aucun commentaire:
Enregistrer un commentaire