jQuery 上传头像插件Jcrop的实例

Posted WebEnh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘
    });
}
 
 
 

以上是关于jQuery 上传头像插件Jcrop的实例的主要内容,如果未能解决你的问题,请参考以下文章

Jcrop ,.net仿百度上传在线编辑头像

Jcrop+uploadify+php实现上传头像预览裁剪

移动端web头像上传实现截取和照片方向修复

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上传裁剪图片-----Jcrop图片裁剪插件

jQuery插件ImgAreaSelect 实例讲解二