我其实比较忠实于原味的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>
传入参数为：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(){}
}
<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{352px;height:422px;}
.imgCut11{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; 100px; height:100px}
.imgCut112 td.main{150px; height:200px;border:1px solid #ffffff;background-color:transparent}
.imgCut12{249px;margin:0px auto}
.imgCut121{float:left;border:0px;background:url(Minc.gif) no-repeat;19px;height:19px}
.imgCut122{float:left; background:url(track.gif) no-repeat center; height:20px;211px; position:relative}
.imgCut1221{position:absolute;top:3px;left:100px;background:url(grip.gif) no-repeat;11px;height:16px}
.imgCut123{float:left;border:0px;background:url(Maxc.gif) no-repeat;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;
});
}
在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({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;
}//原始图当前的高度
方法二：
如何实现javascript截图 jQuery插件imgAreaSelect使用详解
为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。主要实现的形式有两种，一种是flash截图，另一种就是javascript截图，两种方法各有秋千，关于Flash截图可以参考一下UcHome程序中头像上传功能，但这不是我要讨论的话题，我这里主要是如何实现javascript截图，利用jQuery的imgAreaSelect插件，轻松实现自定义头像[avatar]javascript截图功能。
一，准备：
两个JS文件
1，jquery.js 下载：jquery.js
2，jquery.imgareaselect.js 下载：jquery.imgareaselect.js[imgareaselect-0.6.2.zip]
二，使用
function preview(img, selection){
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
//动态小头像 获取当前选中框的宽度，高度，左边框，右边框
$('#biuuu + div > img').css({
Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//加载小头像
$(document).ready(function () {
$('<div><img src="biuuu.jpg" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
'100px',
height: '100px'
})
.insertAfter($('#biuuu'));
});
//初始化加载
$(window).load(function () {
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
三，调用
<div class="container">
<p>
<img id="biuuu" src="biuuu.jpg" title="biuuu" style="float: left; margin-right: 10px;" />
</p>
</div>
使用上面的javascript截图进行扩展可以实现很多的动态功能，jQuery提供的imgAreaSelect插件调用非常简单，其它相关应用可参考：imgAreaSelect Examples
使用jQuery插件imgAreaSelect实现javascript截图还是非常简单的，基本上就是一个动态的图像显示，获取源图片的位置和选取框的大小[宽度和高度]，轻松实现javascript截图功能。