最近天天都是加班，好不容易年前休息了，就抽点时间谢谢，自认为还是比较简单易懂的，没有用什么复杂牛叉的算法，因为我也会，呵呵。(没有对图片大小边界做判断，只对容器做了判断，请注意~ )
?
懒得详细说明了，先上前端代码：
?
<!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, oldL=ul.offsetLeft+2, oldW=ul.offsetWidth, oldH=ul.offsetHeight, minW=50,minH=50, _method=this; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } document.onmousemove=function(e){ e=e||window.event; var lis={'w':'tr,mr,fr','h':'fl,fc,fr','l':'tl,ml,fl','t':'tl,tc,tr'}; if(lis.w.indexOf(_method.className)>-1){ var w=e.clientX-oldX+oldW; w=w<minW?minW:w>divW-oldL?divW-oldL:w; ul.style.width=w+'px'; } if(lis.h.indexOf(_method.className)>-1){ var h=e.clientY-oldY+oldH; h=h<minH?minH:h>divH-oldT?divH-oldT:h; ul.style.height=h+'px'; if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug } if(lis.l.indexOf(_method.className)>-1){ var l=e.clientX-oldX+oldL; l=l<0?0:l>oldW+oldL-minW?oldW+oldL-minW:l; ul.style.left=l+'px'; ul.style.width=oldW+oldL-l+'px'; } if(lis.t.indexOf(_method.className)>-1){ var t=e.clientY-oldY+oldT; t=t<0?0:t>oldH+oldT-minH?oldH+oldT-minH:t; ul.style.top=t+'px'; ul.style.height=oldH+oldT-t+'px'; if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=oldH+oldT-t+'px';}//ie6下高度不变bug } see(); }; clear(this); }; } see(); })(); </script> </body> </html>?
?
这里是php处理的代码，具体图片自己弄吧~哈哈~后期会出功能多一点的
?
<?php
$img=json_decode(str_replace("\\'",'"',$_POST['imgInfor']),true);
$old = imagecreatefromstring(file_get_contents($img['url']));
if(function_exists("imagecreatetruecolor")){
$new=imagecreatetruecolor($img['w'],$img['h']); // 创建目标图gd2
}else{
$new=imagecreate($img['w'],$img['h']); // 创建目标图gd1
}
imagecopyresampled ($new,$old,0,0,$img['x'],$img['y'],$img['w'],$img['h'],$img['w'],$img['h']);
imagejpeg($new,'img\\'.getip().'_'.time().'.jpg');
@header("Content-type: image/jpeg");
imagejpeg($new);
imagedestroy($new);
function getip(){
if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){
$ip = getenv("HTTP_CLIENT_IP");
}else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){
$ip = getenv("HTTP_X_FORWARDED_FOR");
}else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){
$ip = getenv("REMOTE_ADDR");
}else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){
$ip = $_SERVER['REMOTE_ADDR'];
}else{
$ip = "unknown";
}
return ($ip);
}
?>
?
附件可以直接下载，大家共勉~
相关文章
