[原创]基于jquery.Jcrop的头像编辑器

用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的.

在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃.

在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用.

官方网址:http://deepliquid.com/content/Jcrop.html

上面有很多demo,有兴趣的可以上去看看.

此文章中,封装的JS如下:

代码

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