基于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://3water.com/jiaoben/24767.html