css - simple croppic example jquery -

i working on upload profile picture.

i using www.croppic.net because browser compitible.

i wasted 2 days on it.but cant proper example.

i have downloaded whole website link website footer section.

but after remove unnecessary js/css (bootstrap,etc.). still don't know how works :d..

please suggest me other jquery provide upload , crop browser compitible

you have aware include necessary files. have ran , post image ajax request , save on server. files :

1. croppic.css @ header
2. include css image area, example have div tag parent of plugin , called cropheaderwrapper , has overflow:hidden;height: 420px;direction: ltr;
3. the plugin tell later
4. include https://code.jquery.com/jquery-2.1.3.min.js
5. include jquery.mousewheel.min.js
6. include croppic.min.js
7. and initialize tell you

for case of 3, have these codes :

<div class="col-xs-12 text-center cropheaderwrapper">     <div id="croppic"></div>     <span class="btn" id="cropcontainerheaderbutton">browse</span>     <input type="hidden" id="get_img_url"> </div> 

for cropheaderwrapper told parent of plugin , define div tag , assign id called croppic, after define browse key have initialize in configuration explain , last 1 have input tag our path image have save on server.

the config section consist of these codes :

var croppicheaderoptions = {         cropurl:'blog/upload_img',         outputurlid: 'get_img_url',         customuploadbuttonid:'cropcontainerheaderbutton',         modal:false,         processinline:true,         onbeforeimgupload: function(){ console.log('onbeforeimgupload') },         onafterimgupload: function(){ console.log('onafterimgupload') },         onimgdrag: function(){ console.log('onimgdrag') },         onimgzoom: function(){ console.log('onimgzoom') },         onbeforeimgcrop: function(){ console.log('onbeforeimgcrop') },         onafterimgcrop:function(){ console.log('onafterimgcrop') },         onreset:function(){ console.log('onreset') },         onerror:function(errormessage){ console.log('onerror:'+errormessage) } }    var croppic = new croppic('croppic', croppicheaderoptions); 

cropurl path want process image save on server. in case worked on mvc , path function, can path example.php or ever. outputurlid path url image has been saved there. customuploadbuttonid button browse images on local.

please notice not need upload image , after crop it! can use processinline , set true , our image uploaded base64 , after need on our image need save on server. i'm working on plugin , works on ie version 8 too. if have question please inform me.