基于jquery.Jcrop的头像编辑器_jquery-tutorial js-php.cn

基于jquery.Jcrop的头像编辑器_jquery

WBOY

Lepaskan： 2016-05-16 18:33:31

asal

1053 orang telah melayarinya

用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用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;ipurviews[purviews.length] = config.purviews[i];
}
}
check_thums_img = function(){
if(config.purviews){
for(i=0,c=config.purviews.length;iif($('#'+config.purviews[i].id+" img").length==0){
$('#'+config.purviews[i].id).html(" 基于jquery.Jcrop的头像编辑器_jquery

");
}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(" 基于jquery.Jcrop的头像编辑器_jquery

");
$("#"+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;ivar 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;ivar 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. 导入必需的文件
代码

复制代码代码如下:

2. 定义原始图片与缩略图的容器
代码

复制代码代码如下:

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