基于jquery.Jcrop的头像编辑器

【 tulaoshi.com - Web开发 】

用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的.
在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃.
在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用.
上面有很多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;ic;++i){
purviews[purviews.length] = config.purviews[i];
}
}
check_thums_img = function(){
if(config.purviews){
for(i=0,c=config.purviews.length;ic;++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;ic;++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;ic;++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)即时修改图片路径