基于jquery.Jcrop的头像编辑器

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)即时修改图片路径
文件打包下载 //www.jb51.net/jiaoben/24767.html