免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › PHP › php文档中心 › JS简易图片裁剪-单点移动带缩略图
最近访问板块 发新帖
查看: 2694 | 回复: 1
打印 上一主题 下一主题

JS简易图片裁剪-单点移动带缩略图 [复制链接]

feiyang10086

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2012-01-19 16:56 |只看该作者 |倒序浏览
JS简易图片裁剪-单点移动带缩略图







比较上一个版本多了缩略效果，但是切割图的地方还没有做大小缩放功能，等有时间做出来了继续更新，谢谢大家捧场哈



老规矩，先上html代码(没有对图片大小边界做判断，只对容器做了判断，请注意~ )



Html代码
  1. 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. 2.<html xmlns="http://www.w3.org/1999/xhtml">  
  3. 3.<head>  
  4. 4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. 5.<title>无标题文档</title>  
  6. 6.<style type="text/css">  
  7. 7.*{margin:0; padding:0;}   
  8. 8..imageCut{width:524px; background:#f1f7fb; padding:20px;}   
  9. 9.#picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;}   
  10. 10.#picDiv img{position:absolute; top:0px; left:0px;}   
  11. 11.#picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;}   
  12. 12.#picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;}   
  13. 13.#picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;}   
  14. 14.#picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;}   
  15. 15.form{clear:both; text-align:right;}   
  16. 16.</style>  
  17. 17.</head>  
  18. 18.  
  19. 19.<body>  
  20. 20.<div class="imageCut">  
  21. 21.    <div id="picDiv">  
  22. 22.        <img src="../../images/2.jpg" />  
  23. 23.    </div>  
  24. 24.    <div id="picSeeSmall"></div>  
  25. 25.    <div id="picSeeBig"></div>  
  26. 26.    <form action="cutPic.php" method="post">  
  27. 27.        <input type="submit" value=" 提 交 " />  
  28. 28.        <input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />  
  29. 29.        <input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />  
  30. 30.    </form>  
  31. 31.</div>  
  32. 32.<script type="text/javascript">  
  33. 33.(function(){   
  34. 34.    window.onload=cutImage;   
  35. 35.    function cutImage(){   
  36. 36.        var pDiv=document.getElementById('picDiv');   
  37. 37.        pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML;   
  38. 38.        var pDivpDivImg=pDiv.getElementsByTagName('img')[0],   
  39. 39.            clip=pDiv.getElementsByTagName('img')[1],   
  40. 40.            pCut=document.getElementById('picCut'),   
  41. 41.            pChange=document.getElementById('picCutChange');   
  42. 42.            pSeeS=document.getElementById('picSeeSmall'),   
  43. 43.            pSee=document.getElementById('picSeeBig'),   
  44. 44.            pDivpDivW=pDiv.offsetWidth-2,   
  45. 45.            pDivpDivH=pDiv.offsetHeight-2,   
  46. 46.            opacity=function(obj,v){   
  47. 47.                if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';};   
  48. 48.                obj.style.MozOpacity=v/100;   
  49. 49.                obj.style.opacity=v/100;   
  50. 50.            },   
  51. 51.            see=function(){   
  52. 52.                var getPos={   
  53. 53.                    't':pCut.offsetTop,   
  54. 54.                    "l":pCut.offsetLeft,   
  55. 55.                    'w':pCut.offsetWidth,   
  56. 56.                    'h':pCut.offsetHeight,   
  57. 57.                    'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth),   
  58. 58.                    'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight)   
  59. 59.                };   
  60. 60.                init(getPos);   
  61. 61.                seePic(pSee,getPos);   
  62. 62.                seePic(pSeeS,getPos);   
  63. 63.                window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();   
  64. 64.            },   
  65. 65.            init=function(getPos){   
  66. 66.                var t=getPos.t*getPos.kh,   
  67. 67.                    l=getPos.l*getPos.kw;   
  68. 68.                if(!clip){   
  69. 69.                    clip=document.createElement('img');   
  70. 70.                    clip.src=pDivImg.src;   
  71. 71.                    pDiv.appendChild(clip);   
  72. 72.                }   
  73. 73.                pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px';   
  74. 74.                clip.style.cssText='top:-'+t+'px; left:-'+l+'px';   
  75. 75.      
  76. 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. 77.                opacity(pDivImg,50);               
  78. 78.            },   
  79. 79.            seePic=function(obj,getPos){   
  80. 80.                var img=obj.getElementsByTagName('img')[0],   
  81. 81.                    k=obj.offsetWidth/getPos.w;   
  82. 82.                    t=getPos.t*getPos.kh+getPos.t,   
  83. 83.                    l=getPos.l*getPos.kw+getPos.l;   
  84. 84.                if(!img){   
  85. 85.                    img=document.createElement('img');   
  86. 86.                    img.src=pDivImg.src;   
  87. 87.                    obj.appendChild(img);   
  88. 88.                }   
  89. 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. 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. 91.            },   
  92. 92.            clear=function(o){   
  93. 93.                if(!-[1,]){o.setCapture();}//学增加丢失焦点事件   
  94. 94.                document.onmouseup=function(){   
  95. 95.                    if(!-[1,]){o.releaseCapture();}   
  96. 96.                    document.onmousemove=null;   
  97. 97.                    document.onmouseup=null;   
  98. 98.                };   
  99. 99.                return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标   
  100. 100.            };   
  101. 101.        if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了   
  102. 102.            var cDiv=document.createElement('div');   
  103. 103.            cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';   
  104. 104.            pCut.appendChild(cDiv);   
  105. 105.        }   
  106. 106.        pCut.onmousedown=function(e){   
  107. 107.            ee=e||window.event;   
  108. 108.            var oldX=e.clientX-pCut.offsetLeft,   
  109. 109.                oldY=e.clientY-pCut.offsetTop,   
  110. 110.                maxW=pDivW-pCut.offsetWidth,   
  111. 111.                maxH=pDivH-pCut.offsetHeight;   
  112. 112.            document.onmousemove=function(e){   
  113. 113.                ee=e||window.event;   
  114. 114.                var newX=e.clientX-oldX,newY=e.clientY-oldY;   
  115. 115.                newXnewX=newX<0?0:newX>maxW?maxW:newX;   
  116. 116.                newYnewY=newY<0?0:newY>maxH?maxH:newY;   
  117. 117.                pCut.style.top=newY+'px';   
  118. 118.                pCut.style.left=newX+'px';   
  119. 119.                see();   
  120. 120.            };   
  121. 121.            clear(this);   
  122. 122.        };   
  123. 123.        pChange.onmousedown=function(e){   
  124. 124.            ee=e||window.event;   
  125. 125.            var oldX=e.clientX,   
  126. 126.                oldY=e.clientY,   
  127. 127.                oldT=pCut.offsetTop+2,   
  128. 128.                oldL=pCut.offsetLeft+2,   
  129. 129.                oldW=pCut.offsetWidth,   
  130. 130.                oldH=pCut.offsetHeight,   
  131. 131.                minW=50,minH=50;   
  132. 132.            if(e.stopPropagation){   
  133. 133.                e.stopPropagation();   
  134. 134.            }else{   
  135. 135.                e.cancelBubble=true;   
  136. 136.            }   
  137. 137.            document.onmousemove=function(e){   
  138. 138.                ee=e||window.event;   
  139. 139.                var w=e.clientX-oldX+oldW;   
  140. 140.                ww=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w;   
  141. 141.                h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w;   
  142. 142.                ww=w!=h?h:w;   
  143. 143.                pCut.style.width=w+'px';   
  144. 144.                pCut.style.height=h+'px';   
  145. 145.                if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug   
  146. 146.                see();   
  147. 147.            };   
  148. 148.            clear(this);   
  149. 149.        };   
  150. 150.        see();   
  151. 151.    }   
  152. 152.})();   
  153. 153.</script>  
  154. 154.</body>  
  155. 155.</html>  
  156. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  157. <html xmlns="http://www.w3.org/1999/xhtml">
  158. <head>
  159. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  160. <title>无标题文档</title>
  161. <style type="text/css">
  162. *{margin:0; padding:0;}
  163. .imageCut{width:524px; background:#f1f7fb; padding:20px;}
  164. #picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;}
  165. #picDiv img{position:absolute; top:0px; left:0px;}
  166. #picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;}
  167. #picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;}
  168. #picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;}
  169. #picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;}
  170. form{clear:both; text-align:right;}
  171. </style>
  172. </head>

  174. <body>
  175. <div class="imageCut">
  176.     <div id="picDiv">
  177.         <img src="../../images/2.jpg" />
  178.     </div>
  179.     <div id="picSeeSmall"></div>
  180.     <div id="picSeeBig"></div>
  181.     <form action="cutPic.php" method="post">
  182.         <input type="submit" value=" 提 交 " />
  183.         <input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />
  184.         <input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />
  185.     </form>
  186. </div>
  187. <script type="text/javascript">
  188. (function(){
  189.         window.onload=cutImage;
  190.         function cutImage(){
  191.                 var pDiv=document.getElementById('picDiv');
  192.                 pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML;
  193.                 var pDivImg=pDiv.getElementsByTagName('img')[0],
  194.                         clip=pDiv.getElementsByTagName('img')[1],
  195.                         pCut=document.getElementById('picCut'),
  196.                         pChange=document.getElementById('picCutChange');
  197.                         pSeeS=document.getElementById('picSeeSmall'),
  198.                         pSee=document.getElementById('picSeeBig'),
  199.                         pDivW=pDiv.offsetWidth-2,
  200.                         pDivH=pDiv.offsetHeight-2,
  201.                         opacity=function(obj,v){
  202.                                 if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';};
  203.                                 obj.style.MozOpacity=v/100;
  204.                                 obj.style.opacity=v/100;
  205.                         },
  206.                         see=function(){
  207.                                 var getPos={
  208.                                         't':pCut.offsetTop,
  209.                                         "l":pCut.offsetLeft,
  210.                                         'w':pCut.offsetWidth,
  211.                                         'h':pCut.offsetHeight,
  212.                                         'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth),
  213.                                         'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight)
  214.                                 };
  215.                                 init(getPos);
  216.                                 seePic(pSee,getPos);
  217.                                 seePic(pSeeS,getPos);
  218.                                 window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
  219.                         },
  220.                         init=function(getPos){
  221.                                 var t=getPos.t*getPos.kh,
  222.                                         l=getPos.l*getPos.kw;
  223.                                 if(!clip){
  224.                                         clip=document.createElement('img');
  225.                                         clip.src=pDivImg.src;
  226.                                         pDiv.appendChild(clip);
  227.                                 }
  228.                                 pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px';
  229.                                 clip.style.cssText='top:-'+t+'px; left:-'+l+'px';
  230.        
  231.                                 clip.style.clip='rect('+(t+getPos.t)+'px '+(l+getPos.l+getPos.w)+'px '+(t+getPos.t+getPos.h)+'px '+(l+getPos.l)+'px)';
  232.                                 opacity(pDivImg,50);                       
  233.                         },
  234.                         seePic=function(obj,getPos){
  235.                                 var img=obj.getElementsByTagName('img')[0],
  236.                                         k=obj.offsetWidth/getPos.w;
  237.                                         t=getPos.t*getPos.kh+getPos.t,
  238.                                         l=getPos.l*getPos.kw+getPos.l;
  239.                                 if(!img){
  240.                                         img=document.createElement('img');
  241.                                         img.src=pDivImg.src;
  242.                                         obj.appendChild(img);
  243.                                 }
  244.                                 img.style.cssText='width:'+k*pDivImg.width+'px; height:'+k*pDivImg.height+'px; position:absolute; top:-'+t*k+'px; left:-'+l*k+'px;';
  245.                                 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+"'}";
  246.                         },
  247.                         clear=function(o){
  248.                                 if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
  249.                                 document.onmouseup=function(){
  250.                                         if(!-[1,]){o.releaseCapture();}
  251.                                         document.onmousemove=null;
  252.                                         document.onmouseup=null;
  253.                                 };
  254.                                 return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
  255.                         };
  256.                 if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了
  257.                         var cDiv=document.createElement('div');
  258.                         cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
  259.                         pCut.appendChild(cDiv);
  260.                 }
  261.                 pCut.onmousedown=function(e){
  262.                         e=e||window.event;
  263.                         var oldX=e.clientX-pCut.offsetLeft,
  264.                                 oldY=e.clientY-pCut.offsetTop,
  265.                                 maxW=pDivW-pCut.offsetWidth,
  266.                                 maxH=pDivH-pCut.offsetHeight;
  267.                         document.onmousemove=function(e){
  268.                                 e=e||window.event;
  269.                                 var newX=e.clientX-oldX,newY=e.clientY-oldY;
  270.                                 newX=newX<0?0:newX>maxW?maxW:newX;
  271.                                 newY=newY<0?0:newY>maxH?maxH:newY;
  272.                                 pCut.style.top=newY+'px';
  273.                                 pCut.style.left=newX+'px';
  274.                                 see();
  275.                         };
  276.                         clear(this);
  277.                 };
  278.                 pChange.onmousedown=function(e){
  279.                         e=e||window.event;
  280.                         var oldX=e.clientX,
  281.                                 oldY=e.clientY,
  282.                                 oldT=pCut.offsetTop+2,
  283.                                 oldL=pCut.offsetLeft+2,
  284.                                 oldW=pCut.offsetWidth,
  285.                                 oldH=pCut.offsetHeight,
  286.                                 minW=50,minH=50;
  287.                         if(e.stopPropagation){
  288.                                 e.stopPropagation();
  289.                         }else{
  290.                                 e.cancelBubble=true;
  291.                         }
  292.                         document.onmousemove=function(e){
  293.                                 e=e||window.event;
  294.                                 var w=e.clientX-oldX+oldW;
  295.                                 w=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w;
  296.                                 h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w;
  297.                                 w=w!=h?h:w;
  298.                                 pCut.style.width=w+'px';
  299.                                 pCut.style.height=h+'px';
  300.                                 if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug
  301.                                 see();
  302.                         };
  303.                         clear(this);
  304.                 };
  305.                 see();
  306.         }
  307. })();
  308. </script>
  309. </body>
  310. </html>
复制代码
继续php代码



Php代码
  1. 1.<?php   
  2. 2.$time=time();   
  3. 3.cutPic('Small',$time);   
  4. 4.cutPic('Big',$time);   
  5. 5.  
  6. 6.function cutPic($nam,$time){   
  7. 7.    $img=json_decode(str_replace("\\'",'"',$_POST['picSee'.$nam.'Infor']),true);   
  8. 8.    $old_img=imagecreatefromstring(file_get_contents($img['url']));   
  9. 9.    $new_url='images/'.$nam.'_'.getip().'_'.$time.'.jpg';   
  10. 10.    if(function_exists("imagecreatetruecolor")){   
  11. 11.      $new_img=imagecreatetruecolor($img['nw'],$img['nh']);   
  12. 12.    }else{   
  13. 13.      $new_img=imagecreate($img['nw'],$img['nh']);   
  14. 14.    }   
  15. 15.    imagecopyresampled($new_img,$old_img,0,0,$img['x'],$img['y'],$img['nw'],$img['nh'],$img['w'],$img['h']);   
  16. 16.    imagejpeg($new_img,$new_url);   
  17. 17.    imagedestroy($new_img);   
  18. 18.    echo '<img src="'.$new_url.'" /><br /><br /><br />';   
  19. 19.}   
  20. 20.function getip(){   
  21. 21.    if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){   
  22. 22.        $ip = getenv("HTTP_CLIENT_IP");   
  23. 23.    }else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){   
  24. 24.        $ip = getenv("HTTP_X_FORWARDED_FOR");   
  25. 25.    }else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){   
  26. 26.        $ip = getenv("REMOTE_ADDR");   
  27. 27.    }else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){   
  28. 28.        $ip = $_SERVER['REMOTE_ADDR'];   
  29. 29.    }else{   
  30. 30.        $ip = "unknown";   
  31. 31.    }   
  32. 32.    return ($ip);   
  33. 33.}   
  34. 34.?>  
复制代码
梦境照进现实

论坛徽章:
0
2楼 [报告]
发表于 2012-01-19 22:24 |只看该作者
谢谢分享
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP