Heim > Web-Frontend > js-Tutorial > 基于jquery.Jcrop的头像编辑器_jquery

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

WBOY
Freigeben: 2016-05-16 18:33:31
Original
1076 Leute haben es durchsucht

用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用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. 定义原始图片与缩略图的容器
代码
复制代码 代码如下:



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






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
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage