基于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)即时修改图片路径

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