jQuery 上传头像插件Jcrop的实例

兼容：ie6+,FF,chrome等

示例图：

CSS：

      说明：图像比例为 110:135

      下载包里有 jquery.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() - 110) / 2 ,

            _Jh = ($('#target').height() - 135) / 2 ,

            _Jw2 = _Jw + 110,

            _Jh2 = _Jh + 135;

      if($("#target").length >= 1){

            var api = $.Jcrop("#target",{

                  onChange: showPreview,

                  onSelect: showPreview,

                  bgFade: true,

                  bgOpacity: .5,

                  setSelect: [_Jw, _Jh, _Jw2, _Jh2]

            });

      }

      function showPreview(c){

            var iw = $('.jcrop-holder>img').width(),

                  ih = $('.jcrop-holder>img').height(),

                  rx = 110 / c.w,

                  ry = 135 / c.h,

                  rx1 = 73 / c.w,

                  ry1 = 90 / c.h,

                  rx2 = 40 / c.w,

                  ry2 = 48 / c.h,

                  _data = $(".jc-demo-box").attr("data");

            if($.browser.msie && (_data == 90 || _data == 270)){

                        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);

                        pre_img2($('.pre-3 img'), rx2, ih, ry2, iw, c.x, c.y);

            }else{

                  pre_img2($('.pre-1 img'), rx, iw, ry, ih, c.x, c.y);

                  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);

            }

      }

      

      $("#idLeft").click(function(e){

            imgRotate(-90);

            stopEvent(e);

      });

      $("#idRight").click(function(e){

            imgRotate(90);

            stopEvent(e);

      });

      $("#idBig").click(function(e){

            imgToSize(20);

            stopEvent(e);

      });

      $("#idSmall").click(function(e){

            imgToSize(-20);

            stopEvent(e);

      });

});

//图片旋转

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));

            var _filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + "," +   "M12=" + (-sin)

                  + ",M21=" + sin+ ",M22=" + cos + ",SizingMethod='auto expand')";

            img1.css({

                  filter: _filter + "alpha(opacity=60)",

                  opacity: 0.6

            });

            img2.css({

                  filter: _filter

            });

            $('.pre-1 img,.pre-2 img,.pre-3 img').css({

                  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{

            var _deg = deg + _data;

            var _val =   "rotate("+ _deg + "deg)";

            img1.css({

                  "-webkit-transform": _val,

                       "-moz-transform": _val,

                        "-ms-transform": _val,

                          "-o-transform": _val,

                              "transform": _val

            });

            img2.css({

                  "-webkit-transform": _val,

                       "-moz-transform": _val,

                        "-ms-transform": _val,

                          "-o-transform": _val,

                              "transform": _val

            });

            $('.pre-1 img,.pre-2 img,.pre-3 img').css({

                  "-webkit-transform": _val,

                       "-moz-transform": _val,

                        "-ms-transform": _val,

                          "-o-transform": _val,

                              "transform": _val

            });

      }

      if( deg > 0){

            if(_data == 270){

                  _data = 0;

            }else{

                  _data = _data + 90;

            }

      }else{

            if(_data == 0){

                  _data = 270;

            }else{

                  _data = _data - 90;

            }

      }

      $(".jc-demo-box").attr("data", _data);

}

//放大缩小图片

var imgToSize = function (size) {

            var img1 = $(".jcrop-holder>img"),

                  img2 = $("#real"),

                  ow=img1.width(),

                  oh=img1.height(),

                  rx = $("#small").width(),

                  ry = $("#small").height(),

                  cx = $("#small").position().left,

                  cy = $("#small").position().top,

                  _w = Math.round(ow + size),

                  _h = Math.round(((ow + size) * oh) / ow),

                  _data = $(".jc-demo-box").attr("data");

            $('.jcrop-holder').width(_w).height(_h).css({

                  left: Math.round((395 - _w) / 2) + 'px',

                  top: Math.round((340 - _h) / 2) + 'px'

            });

      if($.browser.msie && (_data == 90 || _data == 270)){

                  img1.width(_h).height(_w);

                  img2.width(_h).height(_w);

                  pre_img($('.pre-1 img'), rx, oh, ry, ow, cx, cy, 110, 135);

                  pre_img($('.pre-2 img'), rx, oh, ry, ow, cx, cy, 73, 90);

                  pre_img($('.pre-3 img'), rx, oh, ry, ow, cx, cy, 40, 48);

      }else{

            img1.width(_w).height(_h);

            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, 73, 90);

            pre_img($('.pre-3 img'), rx, ow, ry, oh, cx, cy, 40, 48);

      }

}

var pre_img2 = function(obj, rx, iw, ry, ih, cx, cy){

      obj.css({

            width: Math.round(rx * iw) + 'px',

            height: Math.round(ry * ih) + 'px',

            marginLeft: '-' + Math.round(rx * cx) + 'px',

            marginTop: '-' + Math.round(ry * cy) + 'px'

      });

}

var pre_img = function(obj, rx, ow, ry, oh, cx, cy, w, h){

      obj.css({

            width: Math.round( w / rx * ow) + 'px',

            height: Math.round(h / ry * oh) + 'px',

            marginLeft: '-' + Math.round(w / rx * cx) + 'px',

            marginTop: '-' + Math.round(h / rx * cy) + 'px'

      });

}

下载地址： https://github.com/jianhuayixiao/Jcrop

原文地址：http://blog.sina.com.cn/s/blog_65c2ec5e0101jajb.html