登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

jQuery头像裁剪 Image Cropper  

2010-12-01 13:36:51|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

实现原理:

这是一个基于jQuery UI的图像裁剪前端脚本。
利用Draggable和Resizable两个插件让虚线框可移动可缩放,并且设置相关参数移动界限、初始大小和位置、等比缩放、事件。
给大图加CSS透明度,于是它就灰了。虚线框内清晰图其实就是CSS背景background。以大图左上角为原点,计算出虚线框左上角的坐标offset(就叫坐标吧- -|)。虚线框的坐标值跟背景图position值刚好相反。当移动或缩放时计算一下,然后改变背景图的位置position,这样效果就出来了。
再说下预览图,首先预览图跟实际图是不一样大的,它们之间存在一个比率n(所设预览图大小除实际图大小)。前面已经计算过虚线框的坐标了,预览图的scrollTop和scrollLeft乘比率n刚好跟这个坐标值相等,当移动或缩放时计算一下,然后改变预览图的位置scrollTop和scrollLeft,OK了。
当移动完或缩放完时顺便将虚线框的坐标和宽高记录到隐藏域传给后台程序,剩下工作归后台技术。
有问题或建议可以给我留言


一些碎片:

html如下:
<form id="setFace" name="setFace" method="post" action="">
<div id="imgBox"><img id="faceImg" src="style/xx.jpg" /><div id="imgCut"></div></div>
<div id="imgBox_pre"><strong>头像预览</strong><div><img id="faceImg_pre" src="style/xx.jpg" /></div><button type="submit">保存头像</button></div>
left<input name="left" type="text" id="left" size="3" readonly="readonly" />
top<input name="top" type="text" id="top" size="3" readonly="readonly" />
width<input name="width" type="text" id="width" size="3" readonly="readonly" />
height<input name="height" type="text" id="height" size="3" readonly="readonly" />
</form>
css默认样式如下:
#setFace{position:relative;}
#imgBox_pre{float:left;width:100px;margin-left:50px;}
#imgBox_pre strong{display:block;text-align:center;color:#090;}
#imgBox_pre button{display:block;width:70px;margin:0 auto;}
#imgBox_pre div{width:48px;height:48px;margin:5px auto 20px;overflow:hidden;border:#eee 5px solid;}
#imgBox{float:left;border:#ddd 3px solid;}
#imgCut{border:#fff 1px dashed;width:100px;height:100px;position:absolute;top:20px;left:20px;cursor:move;}
#faceImg{opacity:0.5;filter:alpha(opacity=50);}

JS如下:
var scale=1;
var imgH=new Number;
var imgW=new Number;
var src=$("#faceImg").attr("src");
var scale=48/96;
$("#faceImg").load(function(){
imgH=$("#faceImg").height();
imgW=$("#faceImg").width();
$("#imgBox").width(imgW).height(imgH);
$("#setFace").width(700).height(imgH+4);
$("#imgCut").css("background","url("+src+") -20px -20px no-repeat");
$("#faceImg_pre").height(imgH*scale);
$("#imgBox_pre div").scrollTop(20*scale).scrollLeft(20*scale);
});
$("#imgCut").draggable({
containment:$("#faceImg"),
drag:function(){
var temp_top=$(this).offset().top-$("#faceImg").offset().top;
var temp_left=$(this).offset().left-$("#faceImg").offset().left;
scale=48/$(this).height();
$("#faceImg_pre").height(imgH*scale);
$(this).css("background","url("+src+") -"+(temp_left+1)+"px -"+(temp_top+1)+"px no-repeat");
$("#imgBox_pre div").scrollTop(temp_top*scale).scrollLeft(temp_left*scale);
},
stop:function(){
$("#width").val($(this).width());
$("#height").val($(this).height());
$("#left").val(($(this).offset().left-$("#faceImg").offset().left));
$("#top").val(($(this).offset().top-$("#faceImg").offset().top));
}
});
$("#imgCut").resizable({
containment:$("#faceImg"),
handles:"all",
knobHandles:true,
aspectRatio:true,
minWidth:96,
minHeight:96,
resize:function(){
var temp_top=$(this).offset().top-$("#faceImg").offset().top;
var temp_left=$(this).offset().left-$("#faceImg").offset().left;
scale=48/$(this).height();
$("#faceImg_pre").height(imgH*scale);
$(this).css("background","url("+src+") -"+(temp_left+1)+"px -"+(temp_top+1)+"px no-repeat");
$("#imgBox_pre div").scrollTop(temp_top*scale).scrollLeft(temp_left*scale);
},
stop:function(e,ui){
$("#width").val($(this).width());
$("#height").val($(this).height());
$("#left").val(($(this).offset().left-$("#faceImg").offset().left));
$("#top").val(($(this).offset().top-$("#faceImg").offset().top));
}
});


相关下载:

下载最新版本jQuery
下载jQuery UI 中的UI Core、Draggable、Resizable三个文件

来源:http://www.xij.cn/blog/wp-content/uploads/2008/10/ImageCropper.html

  评论这张
 
阅读(1890)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018