基于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];