JS简易图片剪裁-多点移动
日期：2014-05-16 浏览次数：20364 次
JS简易图片裁剪-多点移动
最近天天都是加班，好不容易年前休息了，就抽点时间谢谢，自认为还是比较简单易懂的，没有用什么复杂牛叉的算法，因为我也会，呵呵。(没有对图片大小边界做判断，只对容器做了判断，请注意~ )
?
懒得详细说明了，先上前端代码：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
#picDiv{width:703px; height:338px; background:#fff; border:1px solid #999; margin:100px auto; position:relative; overflow:hidden;}
#picDiv ul{width:200px; height:200px; border:1px dashed #fff; cursor:move; list-style:none; position:relative; z-index:200;}
#picDiv li{width:6px; height:6px; background:#fff; border:1px solid #333; margin:-4px 0 0 -4px; overflow:hidden; position:absolute; opacity:0.5; filter:alpha(opacity=50);}
#picDiv li.tl{cursor:nw-resize; top:0%; left:0%;}
#picDiv li.tc{cursor:n-resize; top:0%; left:50%;}
#picDiv li.tr{cursor:ne-resize; top:0%; left:100%;}
#picDiv li.ml{cursor:w-resize; top:50%; left:0%;}
#picDiv li.mr{cursor:e-resize; top:50%; left:100%;}
#picDiv li.fl{cursor:sw-resize; top:100%; left:0%;}
#picDiv li.fc{cursor:s-resize; top:100%; left:50%;}
#picDiv li.fr{cursor:se-resize; top:100%; left:100%;}
</style>
</head>
<body>
<div id="picDiv">
<ul>
<li class="tl"></li>
<li class="tc"></li>
<li class="tr"></li>
<li class="ml"></li>
<li class="mr"></li>
<li class="fl"></li>
<li class="fc"></li>
<li class="fr"></li>
</ul>
<img src="../images/2.jpg" style="position:absolute; top:0; left:0; opacity:0.3; filter:alpha(opacity=30); z-index:10;" />
<img src="../images/2.jpg" style="position:absolute; top:0; left:0; clip:rect(0 0 0 0); z-index:100;" />
</div>
<form action="41.php" method="post">
<input type="submit" value=" 提 交 " />
<input type="hidden" id="imgInfor" name="imgInfor" />
</form>
<script type="text/javascript">
(function(){
var div=document.getElementById('picDiv'),
ul=div.getElementsByTagName('ul')[0],
li=ul.getElementsByTagName('li');
divW=div.offsetWidth-2,
divH=div.offsetHeight-2,
see=function(){
var t=ul.offsetTop,
l=ul.offsetLeft,
r=l+ul.offsetWidth,
f=t+ul.offsetHeight;
div.getElementsByTagName('img')[1].style.clip='rect('+t+'px '+r+'px '+f+'px '+l+'px)';
document.getElementById('imgInfor').value="{'x':'"+l+"','y':'"+t+"','w':'"+ul.offsetWidth+"','h':'"+ul.offsetHeight+"','url':'"+div.getElementsByTagName('img')[1].src+"'}";
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
},
clear=function(o){
if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
document.onmouseup=function(){
if(!-[1,]){o.releaseCapture();}
document.onmousemove=null;
document.onmouseup=null;
};
return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
};
if(!-[1,]){
var cDiv=document.createElement('div');
cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
ul.appendChild(cDiv);
}
ul.onmousedown=function(e){
e=e||window.event;
var oldX=e.clientX-ul.offsetLeft,
oldY=e.clientY-ul.offsetTop,
maxW=divW-ul.offsetWidth,
maxH=divH-ul.offsetHeight;
document.onmousemove=function(e){
e=e||window.event;
var newX=e.clientX-oldX,newY=e.clientY-oldY;
newX=newX<0?0:newX>maxW?maxW:newX;
newY=newY<0?0:newY>maxH?maxH:newY;
ul.style.top=newY+'px';
ul.style.left=newX+'px';
see();
};
clear(this);
};
for(var i in li){
li[i].onmousedown=function(e){
e=e||window.event;
var oldX=e.clientX,
oldY=e.clientY,
oldT=ul.offsetTop+2,
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
