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