基于jquery.Jcrop的头像编辑器


Posted in Javascript onMarch 01, 2010

用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用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]; 
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)即时修改图片路径
文件打包下载 https://3water.com/jiaoben/24767.html
Javascript 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 #Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 #Javascript
在chrome中window.onload事件的一些问题
Mar 01 #Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 #Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 #Javascript
使用js获取QueryString的方法小结
Feb 28 #Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 #Javascript
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
JavaScript面象对象设计
2008/04/28 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
js解决movebox移动问题
2016/03/29 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python自动创建Excel并获取内容
2020/09/16 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
经典c++面试题六
2012/01/18 面试题
顶岗实习接收函
2014/01/09 职场文书
初级会计求职信范文
2014/02/15 职场文书
营销与策划专业求职信
2014/06/20 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python