用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用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)即时修改图片路径 文件打包下载 http://www.jb51.net/jiaoben/24767.html

　　推荐阅读

　　JavaScript 空位补零实现代码

实现一： 复制代码 代码如下: /* 平淡无奇法 */ function pad(num, n) { var i = (num + "").length; while(i++ < n) num = "0" + num; return num; } 上面的代码太平淡无奇，体现不了我的真实水平。于是有了实现>>>详细阅读

本文标题：基于jquery.Jcrop的头像编辑器

地址：http://www.17bianji.com/kaifa2/JS/26999.html

 1/2    1