- 论坛徽章:
- 0
|
JS简易图片裁剪-单点移动带缩略图
比较上一个版本多了缩略效果,但是切割图的地方还没有做大小缩放功能,等有时间做出来了继续更新,谢谢大家捧场哈
老规矩,先上html代码(没有对图片大小边界做判断,只对容器做了判断,请注意~ )
Html代码- 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2.<html xmlns="http://www.w3.org/1999/xhtml">
- 3.<head>
- 4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 5.<title>无标题文档</title>
- 6.<style type="text/css">
- 7.*{margin:0; padding:0;}
- 8..imageCut{width:524px; background:#f1f7fb; padding:20px;}
- 9.#picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;}
- 10.#picDiv img{position:absolute; top:0px; left:0px;}
- 11.#picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;}
- 12.#picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;}
- 13.#picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;}
- 14.#picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;}
- 15.form{clear:both; text-align:right;}
- 16.</style>
- 17.</head>
- 18.
- 19.<body>
- 20.<div class="imageCut">
- 21. <div id="picDiv">
- 22. <img src="../../images/2.jpg" />
- 23. </div>
- 24. <div id="picSeeSmall"></div>
- 25. <div id="picSeeBig"></div>
- 26. <form action="cutPic.php" method="post">
- 27. <input type="submit" value=" 提 交 " />
- 28. <input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />
- 29. <input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />
- 30. </form>
- 31.</div>
- 32.<script type="text/javascript">
- 33.(function(){
- 34. window.onload=cutImage;
- 35. function cutImage(){
- 36. var pDiv=document.getElementById('picDiv');
- 37. pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML;
- 38. var pDivpDivImg=pDiv.getElementsByTagName('img')[0],
- 39. clip=pDiv.getElementsByTagName('img')[1],
- 40. pCut=document.getElementById('picCut'),
- 41. pChange=document.getElementById('picCutChange');
- 42. pSeeS=document.getElementById('picSeeSmall'),
- 43. pSee=document.getElementById('picSeeBig'),
- 44. pDivpDivW=pDiv.offsetWidth-2,
- 45. pDivpDivH=pDiv.offsetHeight-2,
- 46. opacity=function(obj,v){
- 47. if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';};
- 48. obj.style.MozOpacity=v/100;
- 49. obj.style.opacity=v/100;
- 50. },
- 51. see=function(){
- 52. var getPos={
- 53. 't':pCut.offsetTop,
- 54. "l":pCut.offsetLeft,
- 55. 'w':pCut.offsetWidth,
- 56. 'h':pCut.offsetHeight,
- 57. 'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth),
- 58. 'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight)
- 59. };
- 60. init(getPos);
- 61. seePic(pSee,getPos);
- 62. seePic(pSeeS,getPos);
- 63. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
- 64. },
- 65. init=function(getPos){
- 66. var t=getPos.t*getPos.kh,
- 67. l=getPos.l*getPos.kw;
- 68. if(!clip){
- 69. clip=document.createElement('img');
- 70. clip.src=pDivImg.src;
- 71. pDiv.appendChild(clip);
- 72. }
- 73. pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px';
- 74. clip.style.cssText='top:-'+t+'px; left:-'+l+'px';
- 75.
- 76. clip.style.clip='rect('+(t+getPos.t)+'px '+(l+getPos.l+getPos.w)+'px '+(t+getPos.t+getPos.h)+'px '+(l+getPos.l)+'px)';
- 77. opacity(pDivImg,50);
- 78. },
- 79. seePic=function(obj,getPos){
- 80. var img=obj.getElementsByTagName('img')[0],
- 81. k=obj.offsetWidth/getPos.w;
- 82. t=getPos.t*getPos.kh+getPos.t,
- 83. l=getPos.l*getPos.kw+getPos.l;
- 84. if(!img){
- 85. img=document.createElement('img');
- 86. img.src=pDivImg.src;
- 87. obj.appendChild(img);
- 88. }
- 89. img.style.cssText='width:'+k*pDivImg.width+'px; height:'+k*pDivImg.height+'px; position:absolute; top:-'+t*k+'px; left:-'+l*k+'px;';
- 90. 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+"'}";
- 91. },
- 92. clear=function(o){
- 93. if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
- 94. document.onmouseup=function(){
- 95. if(!-[1,]){o.releaseCapture();}
- 96. document.onmousemove=null;
- 97. document.onmouseup=null;
- 98. };
- 99. return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
- 100. };
- 101. if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了
- 102. var cDiv=document.createElement('div');
- 103. cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
- 104. pCut.appendChild(cDiv);
- 105. }
- 106. pCut.onmousedown=function(e){
- 107. ee=e||window.event;
- 108. var oldX=e.clientX-pCut.offsetLeft,
- 109. oldY=e.clientY-pCut.offsetTop,
- 110. maxW=pDivW-pCut.offsetWidth,
- 111. maxH=pDivH-pCut.offsetHeight;
- 112. document.onmousemove=function(e){
- 113. ee=e||window.event;
- 114. var newX=e.clientX-oldX,newY=e.clientY-oldY;
- 115. newXnewX=newX<0?0:newX>maxW?maxW:newX;
- 116. newYnewY=newY<0?0:newY>maxH?maxH:newY;
- 117. pCut.style.top=newY+'px';
- 118. pCut.style.left=newX+'px';
- 119. see();
- 120. };
- 121. clear(this);
- 122. };
- 123. pChange.onmousedown=function(e){
- 124. ee=e||window.event;
- 125. var oldX=e.clientX,
- 126. oldY=e.clientY,
- 127. oldT=pCut.offsetTop+2,
- 128. oldL=pCut.offsetLeft+2,
- 129. oldW=pCut.offsetWidth,
- 130. oldH=pCut.offsetHeight,
- 131. minW=50,minH=50;
- 132. if(e.stopPropagation){
- 133. e.stopPropagation();
- 134. }else{
- 135. e.cancelBubble=true;
- 136. }
- 137. document.onmousemove=function(e){
- 138. ee=e||window.event;
- 139. var w=e.clientX-oldX+oldW;
- 140. ww=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w;
- 141. h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w;
- 142. ww=w!=h?h:w;
- 143. pCut.style.width=w+'px';
- 144. pCut.style.height=h+'px';
- 145. if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug
- 146. see();
- 147. };
- 148. clear(this);
- 149. };
- 150. see();
- 151. }
- 152.})();
- 153.</script>
- 154.</body>
- 155.</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代码- 1.<?php
- 2.$time=time();
- 3.cutPic('Small',$time);
- 4.cutPic('Big',$time);
- 5.
- 6.function cutPic($nam,$time){
- 7. $img=json_decode(str_replace("\\'",'"',$_POST['picSee'.$nam.'Infor']),true);
- 8. $old_img=imagecreatefromstring(file_get_contents($img['url']));
- 9. $new_url='images/'.$nam.'_'.getip().'_'.$time.'.jpg';
- 10. if(function_exists("imagecreatetruecolor")){
- 11. $new_img=imagecreatetruecolor($img['nw'],$img['nh']);
- 12. }else{
- 13. $new_img=imagecreate($img['nw'],$img['nh']);
- 14. }
- 15. imagecopyresampled($new_img,$old_img,0,0,$img['x'],$img['y'],$img['nw'],$img['nh'],$img['w'],$img['h']);
- 16. imagejpeg($new_img,$new_url);
- 17. imagedestroy($new_img);
- 18. echo '<img src="'.$new_url.'" /><br /><br /><br />';
- 19.}
- 20.function getip(){
- 21. if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){
- 22. $ip = getenv("HTTP_CLIENT_IP");
- 23. }else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){
- 24. $ip = getenv("HTTP_X_FORWARDED_FOR");
- 25. }else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){
- 26. $ip = getenv("REMOTE_ADDR");
- 27. }else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){
- 28. $ip = $_SERVER['REMOTE_ADDR'];
- 29. }else{
- 30. $ip = "unknown";
- 31. }
- 32. return ($ip);
- 33.}
- 34.?>
复制代码 |
|