献上我新写不久的一个截图的js
好久没来这里了，迷糊了一段时间，为了尽快热手，自己做了一个截图的js，首先是参看了一个博友的文章，心想也许自己可以用更少的代码来实现，于是变有了这个小玩意的诞生。
我其实比较忠实于原味的js，只是用到ajax的时候会选择mootools的xhr包，辛苦的操作dom这么久了觉得也是时候启用便捷的框架提高效率了，前段时间经同事介绍认识了jquery，一见如故，done！这个截图的效果里有两个拖拽，jquery的插件狠多，但我为了练手便决定弃用插件！拖拽自己实现吧！
设计过程中充分考虑了最近流行的面对对象和代码分离，页面上只需写上这么几句便可使用这个截图了。
<script language="javascript">
$(document).ready(function (){
var imgCut1=new ImgCut("showHere","/mydog.jpg",150,200,100,100);
}
</script>
<div id="showHere"></div>
$(document).ready(function (){ var imgCut1=new ImgCut("showHere","/mydog.jpg",150,200,100,100);}</script><div id="showHere"></div>传入参数为：ImgCut（在何处创建对象，原始图片的地址，截取的宽度，截取的高度，截取框距外框左右边距，截取框距外框上下边距）。有点罗嗦，主要是为了增强适应性。
可以通过实例对象的这些属性和方法获取图像参数信息：
截图尺寸:CutW，CutH
截图位置（相对于原始图左上角）:GetCutLeft()，GetCutTop()
原始图当前尺寸:GetImgWidth()，GetImgHeight()
当然别忘了在head里引入文件。
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script><script src="yuImgCut.js" type="text/javascript"></script><link href="yuImgCut.css" rel="stylesheet" type="text/css" />在ImgCut的内部首先设计一个构造函数。
function ImgCut(containerName,imgSrc,cutW,cutH,dCutLeft,dCutTop){
this.ContainerName=containerName; this.ImgSrc=imgSrc; this.CutW=cutW; this.CutH=cutH; this.DCutLeft=dCutLeft; this.DCutTop=dCutTop; this.Fill();}参数的意义前面已经介绍过了，这些参数都设置了默认值。
ImgCut.prototype={
ContainerName:"",//在何处创建对象
ImgSrc:"",//原始图片的地址
CutW:150,//截取的宽度
CutH:200,//截取的高度
DCutLeft:100,//截取框距外框左右边距
DCutTop:100,//截取框距外框上下边距
Fill:function(){
}
}
ContainerName:"",//在何处创建对象
ImgSrc:"",//原始图片的地址
CutW:150,//截取的宽度
CutH:200,//截取的高度
DCutLeft:100,//截取框距外框左右边距
DCutTop:100,//截取框距外框上下边距
Fill:function(){
}}
这里的Fill()的用意在于填充html和注册事件。填充html实在简单，填充完成后效果如下。
<div class="imgCut1"> <div class="imgCut11"> <img class="imgCut111" src="/mydog.jpg"> <table class="imgCut112" border="0" cellpadding="0" cellspacing="0"> <tr><td/><td/><td/></tr><tr><td/><td class="main"/><td/></tr><tr><td/><td/><td/></tr> </table> </div> <div class="imgCut12"> <div class="imgCut121"></div> <div class="imgCut122"> <div class="imgCut1221"></div> </div> <div class="imgCut123"></div> </div></div>这里的css都设置了默认的高宽。
.imgCut1{width:352px;height:422px;}
.imgCut11{width:350px;height:400px;position:relative;overflow:hidden; border:1px solid #999999;margin:0px auto}
.imgCut111{position:absolute;top:0px;left:0px;border:0px}
.imgCut112{position:absolute;top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;cursor:pointer}
.imgCut112 td{background-color:#cccccc; width:100px; height:100px}
.imgCut112 td.main{width:150px; height:200px;border:1px solid #ffffff;background-color:transparent}
.imgCut12{width:249px;margin:0px auto}
.imgCut121{float:left;border:0px;background:url(Minc.gif) no-repeat;width:19px;height:19px}
.imgCut122{float:left; background:url(track.gif) no-repeat center; height:20px;width:211px; position:relative}
.imgCut1221{position:absolute;top:3px;left:100px;background:url(grip.gif) no-repeat;width:11px;height:16px}
.imgCut123{float:left;border:0px;background:url(Maxc.gif) no-repeat;width:19px;height:19px}
.imgCut11{width:350px;height:400px;position:relative;overflow:hidden; border:1px solid #999999;margin:0px auto}
.imgCut111{position:absolute;top:0px;left:0px;border:0px}
.imgCut112{position:absolute;top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;cursor:pointer}
.imgCut112 td{background-color:#cccccc; width:100px; height:100px}
.imgCut112 td.main{width:150px; height:200px;border:1px solid #ffffff;background-color:transparent}
.imgCut12{width:249px;margin:0px auto}
.imgCut121{float:left;border:0px;background:url(Minc.gif) no-repeat;width:19px;height:19px}
.imgCut122{float:left; background:url(track.gif) no-repeat center; height:20px;width:211px; position:relative}
.imgCut1221{position:absolute;top:3px;left:100px;background:url(grip.gif) no-repeat;width:11px;height:16px}
.imgCut123{float:left;border:0px;background:url(Maxc.gif) no-repeat;width:19px;height:19px}
为了实现截图的样式效果，一些人的做法是用两张图片，截取框内一张，外面的大框里再一张，把溢出的隐藏，再把大框里的图片调暗点，随便拖动其中一张的时候也同时移动另一张，我在测试这种做法的时候发现容易使得两张图片移动时有点点的不同步，而且用吝啬的眼光来看的话也有点浪费浏览器的运算资源，所以我设计了一个只用一张图片加一个table来实现同样的效果，table在web2.0里不是不能用，而是要用得当。将table浮动在图片上方，这样就不好拖拽图片了，于是我设计将拖拽分成两个层，触发层和移动层，table担当触发层，为了增强通用性和减少代码量，便又设计触发层和移动层在某些时候也可以成为一体，这样一来，收缩图片的滚动条的功能也同时完成了。具体代码如下。
Drag:function(touchScreenName,dragName,rangeName,track,onDragFunction){
//鼠标是否被按下
var isMouseDown=false;
//鼠标上次移动的X坐标
var cX=0;
//鼠标上次移动的Y坐标
var cY=0;
//触摸屏是否与拖拽对象分离
var jObjImgGrag=dragName && $(dragName) || $(touchScreenName);
//是否限制活动范围
var rangeX=[];
var rangeY=[];
if(rangeName){
rangeX=[0,$(rangeName).get(0).offsetWidth-jObjImgGrag.get(0).offsetWidth];
rangeY=[0,$(rangeName).get(0).offsetHeight-jObjImgGrag.get(0).offsetHeight];
}
$(touchScreenName).mousedown(function(){isMouseDown=true;$(this).css("cursor","move");cX=0;cY=0;});
$(document).mouseup(function(){isMouseDown=false;$(touchScreenName).css("cursor","pointer");}).mousemove(function(e){
//这句很重要,使得拖拽更流畅
try {document.selection && document.selection.empty && (document.selection.empty(), 1) || window.getSelection && window.getSelection().removeAllRanges();} catch(exp){}
if(!isMouseDown)
return;
if(cX==0 && cY==0){
cX=e.clientX;
cY=e.clientY;
}
if(track){
if(track=="h") cY=e.clientY;
if(track=="v") cX=e.clientX;
}
var newLeft=parseInt(jObjImgGrag.css("left").replace("px",""))+e.clientX-cX;
var newTop=parseInt(jObjImgGrag.css("top").replace("px",""))+e.clientY-cY;
if(rangeName){
newLeft=newLeft<rangeX[0] ? 0 : newLeft;
newLeft=newLeft>rangeX[1] ? rangeX[1] : newLeft;
newTop=newTop<rangeY[0] ? 0 : newTop;
newTop=newTop>rangeY[1] ? rangeY[1] : newTop;
}
//开始拖拽
jObjImgGrag.css({left:newLeft,top:newTop});
//拖拽时触发的函数
onDragFunction && onDragFunction({left:newLeft,top:newTop});
cX=e.clientX;
cY=e.clientY;
});
}
//鼠标是否被按下
var isMouseDown=false;
//鼠标上次移动的X坐标
var cX=0;
//鼠标上次移动的Y坐标
var cY=0;
//触摸屏是否与拖拽对象分离
var jObjImgGrag=dragName && $(dragName) || $(touchScreenName);
//是否限制活动范围
var rangeX=[];
var rangeY=[];
if(rangeName){
rangeX=[0,$(rangeName).get(0).offsetWidth-jObjImgGrag.get(0).offsetWidth];
rangeY=[0,$(rangeName).get(0).offsetHeight-jObjImgGrag.get(0).offsetHeight];
}
$(touchScreenName).mousedown(function(){isMouseDown=true;$(this).css("cursor","move");cX=0;cY=0;});
$(document).mouseup(function(){isMouseDown=false;$(touchScreenName).css("cursor","pointer");}).mousemove(function(e){
//这句很重要,使得拖拽更流畅
try {document.selection && document.selection.empty && (document.selection.empty(), 1) || window.getSelection && window.getSelection().removeAllRanges();} catch(exp){}
if(!isMouseDown)
return;
if(cX==0 && cY==0){
cX=e.clientX;
cY=e.clientY;
}
if(track){
if(track=="h") cY=e.clientY;
if(track=="v") cX=e.clientX;
}
var newLeft=parseInt(jObjImgGrag.css("left").replace("px",""))+e.clientX-cX;
var newTop=parseInt(jObjImgGrag.css("top").replace("px",""))+e.clientY-cY;
if(rangeName){
newLeft=newLeft<rangeX[0] ? 0 : newLeft;
newLeft=newLeft>rangeX[1] ? rangeX[1] : newLeft;
newTop=newTop<rangeY[0] ? 0 : newTop;
newTop=newTop>rangeY[1] ? rangeY[1] : newTop;
}
//开始拖拽
jObjImgGrag.css({left:newLeft,top:newTop});
//拖拽时触发的函数
onDragFunction && onDragFunction({left:newLeft,top:newTop});
cX=e.clientX;
cY=e.clientY;
});
}
在Fill()中调用这个方法。
this.Drag("#"+this.ContainerName+" .imgCut112","#"+this.ContainerName+" .imgCut111");
var jImgCut111=$("#"+this.ContainerName+" .imgCut111");
var w=jImgCut111.get(0).offsetWidth;
var h=jImgCut111.get(0).offsetHeight;
var zoom=function(e){
var neww=parseInt(w/100*e.left);
var newh=parseInt(neww/w*h);
jImgCut111.css({width:neww,height:newh});
};
this.Drag("#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut122","h",zoom);
var jImgCut1221=$("#"+this.ContainerName+" .imgCut1221");
$("#"+this.ContainerName+" .imgCut123").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))+1;l=l>200?200:l;jImgCut1221.css("left",l);zoom({left:l});});
$("#"+this.ContainerName+" .imgCut121").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))-1;l=l<0?0:l;jImgCut1221.css("left",l);zoom({left:l});});
var jImgCut111=$("#"+this.ContainerName+" .imgCut111");
var w=jImgCut111.get(0).offsetWidth;
var h=jImgCut111.get(0).offsetHeight;
var zoom=function(e){
var neww=parseInt(w/100*e.left);
var newh=parseInt(neww/w*h);
jImgCut111.css({width:neww,height:newh});
};
this.Drag("#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut122","h",zoom);
var jImgCut1221=$("#"+this.ContainerName+" .imgCut1221");
$("#"+this.ContainerName+" .imgCut123").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))+1;l=l>200?200:l;jImgCut1221.css("left",l);zoom({left:l});});
$("#"+this.ContainerName+" .imgCut121").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))-1;l=l<0?0:l;jImgCut1221.css("left",l);zoom({left:l});});
通过服务器端程序截图的时候，我们需要给他们一些截图定位的参数。
GetCutLeft:function(){
return this.DCutLeft-parseInt($("#"+this.ContainerName+" .imgCut111").css("left").replace("px",""));
},//相对于原始图左边的位置
GetCutTop:function(){
return this.DCutTop-parseInt($("#"+this.ContainerName+" .imgCut111").css("top").replace("px",""));
},//相对于原始图顶边的位置
GetImgWidth:function(){
return $("#"+this.ContainerName+" .imgCut111").get(0).offsetWidth;
},//原始图当前的宽度
GetImgHeight:function(){
return $("#"+this.ContainerName+" .imgCut111").get(0).offsetHeight;
}//原始图当前的高度
return this.DCutLeft-parseInt($("#"+this.ContainerName+" .imgCut111").css("left").replace("px",""));
},//相对于原始图左边的位置
GetCutTop:function(){
return this.DCutTop-parseInt($("#"+this.ContainerName+" .imgCut111").css("top").replace("px",""));
},//相对于原始图顶边的位置
GetImgWidth:function(){
return $("#"+this.ContainerName+" .imgCut111").get(0).offsetWidth;
},//原始图当前的宽度
GetImgHeight:function(){
return $("#"+this.ContainerName+" .imgCut111").get(0).offsetHeight;
}//原始图当前的高度
至此，整个功能就完成了。最后奉上完整的代码，ImgCut，Enjoy！
