Example of jQuery uploading avatar plugin Jcrop

Compatible: Ie6+,ff,chrome and other example diagrams:
CSS:Description: The image scale is110:135There is jquery in the download package. Jcrop.css. jc-demo-box{position:relative; Background-color: #e7e7e7; width:395px; height:340px;overflow:hidden;    border:1px solid #c8c8c8;}    #target {max-width:395px; max-height:340px;}    . pre-1,.pre-2,.pre-3{border:1px solid #c8c8c8;}    . pre-1{width:110px;height:135px; overflow:hidden;}    . pre-2{width:73px;height:90px; overflow:hidden; margin-top:13px;}   . pre-3{width:40px;height:48px; overflow:hidden;margin-top:13px;} . Jcrop-holder{overflow:hidden;} HTML:

JS:$ (function () {     var _JW = ($ (' #target '). Width ()-$)/2,        _JH = ($ (' #target '). Height ()-135)/2,        _JW2 = _jw + 110,        _JH2 = _jh + 135;  & nbsp if ($ ("#target"). Length >= 1) {        var API = $. Jcrop ("#target",{            onchange:showpreview,            onselect:showpreview,            bgfade:true,            BG Opacity: .5,            Setselect: [_jw, _jh, _JW2, _jh2]       }] &nbs P  }    function Showpreview (c) {        var IW = $ ('. Jcrop-holder>img '). Width (), &nbs P           IH = $ ('. Jcrop-holder>img '). Height (),            RX = 110/c.w,            ry = 135/c.h,            RX1 = 73/c.w,            Ry1 = 90/c.h,&nbs P           RX2 = 40/c.w,            Ry2 = 48/c.h,    & nbsp       _data = $ (". Jc-demo-box"). attr ("Data");        if ($.browser.msie && (_da Ta = = 90 | | _data = =)) {                PRE_IMG2 ($ ('. pre-1 img '), RX, IH, ry, IW, c.x, C.Y) ;                PRE_IMG2 ($ ('. pre-2 img '), RX1, IH, Ry1, IW, c.x, c.y);  &nbs P             PRE_IMG2 ($ ('. pre-3 img '), RX2, IH, Ry2, IW, c.x, c.y);      &NBSP ; }else{            PRE_IMG2 ($ ('. pre-1 img '), RX, IW, Ry, IH, c.x, C.Y);      & nbsp     PRE_IMG2 ($ ('. pre-2 img '), RX1, IW, Ry1, IH, c.x, C.Y);            Pre_iMg2 ($ ('. pre-3 img '), rx2, IW, Ry2, IH, c.x, C.Y);       }    }    &nbs P   $ ("#idLeft"). Click (function (e) {        imgrotate ( -90);        Stopevent ( e);   });    $ ("#idRight"). Click (function (e) {        imgrotate (All);        Stopevent (e);   });    $ ("#idBig"). Click (function (e) {      & nbsp Imgtosize (;        stopevent (e);   });    $ ("#idSmall"). Click (function (e) {         imgtosize ( -20);        stopevent (e);   });}); /Picture rotation var imgrotate = function (deg) {    var img1 = $ (". Jcrop-holder>img"),        IMG2 = $ ("#real"),        _data = parseint ($ (". Jc-demo-box"). attr ("Data"));    if ($.browser.msie ) {        var sin = Math.sin (math.pi/180 * (_data + deg));        var cos = math.cos (math.pi/180 * (_data + deg));    &NBSP ;   var _filter = "Progid:DXImageTransform.Microsoft.Matrix (m11=" + cos + "," +   "m12=" + (-sin)     &NBS P       + ", m21=" + sin+ ", m22=" + cos + ", sizingmethod= ' auto expand ')";        IMG1.CSS ( {            Filter: _filter + "alpha (opacity=60)",            opacity:0.6       };        IMG2.CSS ({          &NBSP ; Filter: _filter       });        $ ('. Pre-1 img,.pre-2 img,.pre-3 img '). CSS ({&nbsp ;           filter: _filter       });        var _w = Img1 . Width (),            _h = Img1.height ();        $ ('. Jcrop-holder '). Width (_w). Height (_h). css ({            Left:Math.round ((395-_w)/2) + ' px ',            Top:Math.round ((340-_h)/2) + ' px '        });   }else{      &NBS P var _deg = deg + _data;        var _val =   "Rotate (" + _deg + "deg)";        I Mg1.css ({            "-webkit-transform": _val,            &NB Sp   "-moz-transform": _val,                "-ms-transform": _val,    & nbsp             "-o-transform": _val,                &NBS P   "Transform": _val       });        IMG2.CSS ({        & nbsp   "-webkit-transform": _val,                "-moz-transform": _val,  &nb Sp             "-ms-transform": _val,                nbsp; " -o-transform ": _val,                   " transform ": _val    & nbsp  });        $ ('. Pre-1 img,.pre-2 img,.pre-3 img '). CSS ({            "-webkit-transform": _val,                "-moz-transform": _val,    &NB Sp           "-ms-transform": _val,                  "-O -transform ": _val,                   " transform ": _val    &NB Sp  );   }    if (deg > 0) {        if (_data = =) {      & nbsp     _data = 0;       }else{            _data = _data + 90;&nbsp      }   }else{        if (_data = = 0) {          &N Bsp _data = 270;       }else{            _data = _data-90;    & nbsp  }   }    $ (". Jc-demo-box"). attr ("Data", _data);}  //Zoom Out picture var imgtosize = function (size) {        var img1 = $ (". Jcrop-holder>img"),  &NB Sp         IMG2 = $ ("#real"),            ow=img1.width (),    &nbs P       Oh=img1.height (),            RX = $ ("#small"). Width (),    &NB Sp       ry = $ ("#small"). Height (),            CX = $ ("#small"). Position (). Left,             cy = $ ("#small"). Position () .top,            _W = M Ath.round (ow + size),           _h = Math.Round (((ow + size) * OH)/ow),            _data = $ (". Jc-dem O-box "). attr (" Data ");        $ ('. Jcrop-holder '). Width (_w). Height (_h). CSS ({            Left:Math.round ((395-_w)/2) + ' px ',            Top:Math.round ((34 0-_h)/2) + ' px '        };    if ($.browser.msie && (_data = = | | _data = 270) ) {            img1.width (_h). Height (_w);            Img2.width (_h). Height (_w);            pre_img ($ ('. pre-1 img '), Rx, Oh, ry, OW, CX, CY,, 135); &nbsp ;           pre_img ($ ('. pre-2 img '), Rx, Oh, ry, OW, CX, CY,, all);        &N Bsp   PRE_IMG ($ ('. pre-3 img '), Rx, Oh, ry, OW, CX, CY, all, $);   }else{        Img1.width (_w). Height (_h);  &nbsp     Img2.width (_w). Height (_h);        pre_img ($ ('. pre-1 img '), RX, Ow, Ry, Oh, CX, CY, 110, 135);        pre_img ($ ('. pre-2 img '), RX, Ow, Ry, Oh, CX, CY, I, a);        Pre_ IMG ($ ('. pre-3 img '), RX, Ow, Ry, Oh, CX, CY, all, $);   } }var pre_img2 = function (obj, rx, IW, Ry, IH, CX , CY) {    OBJ.CSS ({        width:Math.round (RX * iw) + ' px ',        HEI Ght:Math.round (RY * ih) + ' px ',        marginleft: '-' + math.round (RX * cx) + ' px ',    &NB Sp   margintop: '-' + math.round (ry * cy) + ' px '    });} var pre_img = function (obj, Rx, ow, Ry, Oh, CX, CY, W, h) {    Obj.css ({        WIDTH:MATH.R Ound (W/RX * ow) + ' px ',        Height:Math.round (H/ry * OH) + ' px ',        m Arginleft: '-' + math.round (W/RX * cx) + ' px ',        margintop: '-' + math.round (H/RX * cy) + ' px '    });}   :https://github.com/jianhuayixiao/Jcrop 

JQuery uploads An instance of the Avatar plugin Jcrop