基于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 相关文章推荐
判断浏览器的javascript版本的代码
Sep 03 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
大学运动会通讯稿
2014/01/28 职场文书
元旦晚会主持词
2014/03/24 职场文书
老公爱的承诺书
2014/03/31 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
淘宝客服工作职责
2014/07/11 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书