比较上一个版本多了缩略效果,但是切割图的地方还没有做大小缩放功能,等有时间做出来了继续更新,谢谢大家捧场哈
?
老规矩,先上html代码(没有对图片大小边界做判断,只对容器做了判断,请注意~ )
?
<!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;} .imageCut{width:524px; background:#f1f7fb; padding:20px;} #picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;} #picDiv img{position:absolute; top:0px; left:0px;} #picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;} #picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;} #picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;} #picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;} form{clear:both; text-align:right;} </style> </head> <body> <div class="imageCut"> <div id="picDiv"> <img src="../../images/2.jpg" /> </div> <div id="picSeeSmall"></div> <div id="picSeeBig"></div> <form action="cutPic.php" method="post"> <input type="submit" value=" 提 交 " /> <input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" /> <input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" /> </form> </div> <script type="text/javascript"> (function(){ window.onload=cutImage; function cutImage(){ var pDiv=document.getElementById('picDiv'); pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML; var pDivImg=pDiv.getElementsByTagName('img')[0], clip=pDiv.getElementsByTagName('img')[1], pCut=document.getElementById('picCut'), pChange=document.getElementById('picCutChange'); pSeeS=document.getElementById('picSeeSmall'), pSee=document.getElementById('picSeeBig'), pDivW=pDiv.offsetWidth-2, pDivH=pDiv.offsetHeight-2, opacity=function(obj,v){ if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';}; obj.style.MozOpacity=v/100; obj.style.opacity=v/100; }, see=function(){ var getPos={ 't':pCut.offsetTop, "l":pCut.offsetLeft, 'w':pCut.offsetWidth, 'h':pCut.offsetHeight, 'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth), 'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight) }; init(getPos); seePic(pSee,getPos); seePic(pSeeS,getPos); window.getSelection?window.getSelection().removeAllRanges():document.selection.empty(); }, init=function(getPos){ var t=getPos.t*getPos.kh, l=getPos.l*getPos.kw; if(!clip){ clip=document.createElement('img'); clip.src=pDivImg.src; pDiv.appendChild(clip); } pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px'; clip.style.cssText='top:-'+t+'px; left:-'+l+'px'; clip.style.clip='rect('+(t+getPos.t)+'px '+(l+getPos.l+getPos.w)+'px '+(t+getPos.t+getPos.h)+'px '+(l+getPos.l)+'px)'; opacity(pDivImg,50); }, seePic=function(obj,getPos){ var img=obj.getElementsByTagName('img')[0], k=obj.offsetWidth/getPos.w; t=getPos.t*getPos.kh+getPos.t, l=getPos.l*getPos.kw+getPos.l; if(!img){ img=document.createElement('img'); img.src=pDivImg.src; obj.appendChild(img); } img.style.cssText='width:'+k*pDivImg.width+'px; height:'+k*pDivImg.height+'px; position:absolute; top:-'+t*k+'px; left:-'+l*k+'px;'; document.getElementById(obj.id+'Infor').value="{'x':'"+l+"','y':'"+t+"','w':'"+getPos.w+"','h':'"+getPos.h+"','k':'"+k+"','nw':'"+(obj.offsetWidth-2)+"','nh':'"+(obj.offsetHeight-2)+"','url':'"+pDivImg.src+"'}"; }, clear=function(o){ if(!-[1,]){o.setCapture();}//学增加丢失焦点事件 document.onmouseup=function(){ if(!-[1,]){o.releaseCapture();} document.onmousemove=null; document.onmouseup=null; }; return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标 }; if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了 var cDiv=document.createElement('div'); cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;'; pCut.appendChild(cDiv); } pCut.onmousedown=function(e){ e=e||window.event; var oldX=e.clientX-pCut.offsetLeft, oldY=e.clientY-pCut.offsetTop, maxW=pDivW-pCut.offsetWidth, maxH=pDivH-pCut.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; pCut.style.top=newY+'px'; pCut.style.left=newX+'px'; see(); }; clear(this); }; pChange.onmousedown=function(e){ e=e||window.event; var oldX=e.clientX, oldY=e.clientY, oldT=pCut.offsetTop+2, oldL=pCut.offsetLeft+2, oldW=pCut.offsetWidth, oldH=pCut.offsetHeight, minW=50,minH=50; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } document.onmousemove=function(e){ e=e||window.event; var w=e.clientX-oldX+oldW; w=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w; h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w; w=w!=h?h:w; pCut.style.width=w+'px'; pCut.style.height=h+'px'; if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug see(); }; clear(this); }; see(); } })(); </script> </body> </html>?
?
继续php代码
?
<?php $time=time(); cutPic('Small',$time); cutPic('Big',$time); function cutPic($nam,$time){ $img=json_decode(str_replace("\\'",'"',$_POST['picSee'.$nam.'Infor']),true); $old_img=imagecreatefromstring(file_get_contents($img['url'])); $new_url='images/'.$nam.'_'.getip().'_'.$time.'.jpg'; if(function_exists("imagecreatetruecolor")){ $new_img=imagecreatetruecolor($img['nw'],$img['nh']); }else{ $new_img=imagecreate($img['nw'],$img['nh']); } imagecopyresampled($new_img,$old_img,0,0,$img['x'],$img['y'],$img['nw'],$img['nh'],$img['w'],$img['h']); imagejpeg($new_img,$new_url); imagedestroy($new_img); echo '<img src="'.$new_url.'" /><br /><br /><br />'; } 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); } ?>?
?
继续附件上传,共勉共勉。。。