[原创]基于jquery.Jcrop的头像编辑器

      用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的.

      在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃.

      在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用.

      官方网址:http://deepliquid.com/content/Jcrop.html

      上面有很多demo,有兴趣的可以上去看看.

      此文章中,封装的JS如下:

     

 

jQuery.UtrialAvatarCutter = function(config){
    var h,w,x,y;

    var os,oh,ow;

    var api = null;

    var sel = this;

    var img_content_id = config.content;

    var img_id = "img_"+(Math.random()+"").substr(3,8);
    var purviews = new Array();

    var select_width = null;
    var select_height = null;

    if(config.purviews){
        for(i=0,c=config.purviews.length;i<c;++i){
            purviews[purviews.length] = config.purviews[i];
        }
    }
    
    check_thums_img = function(){
        if(config.purviews){
            for(i=0,c=config.purviews.length;i<c;++i){
                if($('#'+config.purviews[i].id+" img").length==0){
                    $('#'+config.purviews[i].id).html("<img src='"+os+"'/>");
                }else{
                    $('#'+config.purviews[i].id+" img").attr("src",os);
                }
            }
        }
    }

    /*
     *    重新加载图片
     */
    this.reload = function(img_url){
        if(img_url!=null && img_url != ""){
            os = img_url+"?"+Math.random();
            $("#"+img_content_id).html("<img id='"+img_id+"' src='"+os+"'/>");
            $("#"+img_id).bind("load",
                function(){
                    check_thums_img();
                    sel.init();
                }
            );
        }
    }
    $("#"+img_content_id+" img").attr("id",img_id);

    var preview = function(c) {
        if ( c.w == 0 || c.h == 0 ) {
            api.setSelect([ x, y, x+w, y+h ]);
            api.animateTo([ x, y, x+w, y+h ]);
            return;
        }
        x = c.x;
        y = c.y;
        w = c.w;
        h = c.h;
        for(i=0,c=purviews.length;i<c;++i){
            var purview = purviews[i];
            var rx = purview.width / w;
            var ry = purview.height / h;
            $('#'+purview.id+" img").css({
                width: Math.round(rx * ow) + 'px',
                height: Math.round(ry * oh) + 'px',
                marginLeft: '-' + Math.round(rx * x) + 'px',
                marginTop: '-' + Math.round(ry * y) + 'px'
            });
        }
    }

    this.init = function(){
        if(api!=null){
            api.destroy();
        }
        os = $("#"+img_content_id+" img").attr("src");
        if(os=="")
            return;
        check_thums_img();
        for(i=0,c=purviews.length;i<c;++i){
            var purview = purviews[i];
            var purview_content = $("#"+purview.id);
            purview_content.css({position: "relative", overflow:"hidden", height:purview.height+"px", width:purview.width+"px"});
        }

        oh = $('#'+img_id).height();
        ow = $('#'+img_id).width();
        
        select_width = config.selector.width;
        select_height = config.selector.height;    

        select_width = Math.min(ow,select_width);
        select_height = Math.min(oh,select_height);
        
        x = ((ow - select_width) / 2);
        y = ((oh - select_height) / 2);
        //这是原Jcrop配置,修改此处可修改Jcrop的其它各种功能
        api = $.Jcrop('#'+img_id,{ 
            aspectRatio: 1,
            onChange: preview,
            onSelect: preview
        });
        //设置选择框默认位置
        api.animateTo([ x, y, x+select_width, y+select_height ]);
        
    }

    this.submit = function(){
        return {w:w,h:h,x:x,y:y,s:os};
    }
}

 

      比较简单,不再多说

      应用部分也非常简单

      1. 导入必需的文件

 

        <LINK href="css/jquery.Jcrop.css" type="text/css" rel="Stylesheet" media="screen">
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
        <script type="text/javascript" src="js/jQuery.UtrialAvatarCutter.js"></script>

 

 

      2. 定义原始图片与缩略图的容器

 

        <!--
            原始图
        -->
        <div id="picture_original">
            <img src="http://static.youhuiduo.net/Attatchment/72383/600X600/634030306987187500.jpg"/>
        </div>
        <!---
            缩略图
        -->
        <div id="picture_200"></div>
        <div id="picture_50"></div>
        <div id="picture_30"></div>

 

      3. 配置

 

var cutter = new jQuery.UtrialAvatarCutter(
{
  //主图片所在容器ID
  content : "picture_original",
                    
  //缩略图配置,ID:所在容器ID;width,height:缩略图大小
  purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],
                    
  //选择器默认大小
  selector : {width:200,height:200}
 }
);

 

      4. 触发

 

$(window).load(function(){
  cutter.init();
});

 

      5. 如果是使用ajax上传图片的,可以使用cutter.reload(imgs_url)即时修改图片路径

源文件下载:https://files.cnblogs.com/ycoe/ImgCutter.rar