
平台论坛博客文库

› 论坛 › 程序设计 › PHP › php文档中心 › JS简易图片裁剪-多点移动

JS简易图片裁剪-多点移动 [复制链接]

feiyang10086

家境小康

论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2012-01-19 16:57 |只看该作者 |倒序浏览

JS简易图片裁剪-多点移动

最近天天都是加班，好不容易年前休息了，就抽点时间谢谢，自认为还是比较简单易懂的，没有用什么复杂牛叉的算法，因为我也会，呵呵。(没有对图片大小边界做判断，只对容器做了判断，请注意~ )

懒得详细说明了，先上前端代码：

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.#picDiv{width:703px; height:338px; background:#fff; border:1px solid #999; margin:100px auto; position:relative; overflow:hidden;}
9.#picDiv ul{width:200px; height:200px; border:1px dashed #fff; cursor:move; list-style:none; position:relative; z-index:200;}
10.#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);}
11.#picDiv li.tl{cursor:nw-resize; top:0%; left:0%;}
12.#picDiv li.tc{cursor:n-resize; top:0%; left:50%;}
13.#picDiv li.tr{cursor:ne-resize; top:0%; left:100%;}
14.#picDiv li.ml{cursor:w-resize; top:50%; left:0%;}
15.#picDiv li.mr{cursor:e-resize; top:50%; left:100%;}
16.#picDiv li.fl{cursor:sw-resize; top:100%; left:0%;}
17.#picDiv li.fc{cursor:s-resize; top:100%; left:50%;}
18.#picDiv li.fr{cursor:se-resize; top:100%; left:100%;}
19.</style>
20.</head>
21.
22.<body>
23.<div id="picDiv">
24. <ul>
25. <li class="tl"></li>
26. <li class="tc"></li>
27. <li class="tr"></li>
28. <li class="ml"></li>
29. <li class="mr"></li>
30. <li class="fl"></li>
31. <li class="fc"></li>
32. <li class="fr"></li>
33. </ul>
34. <img src="../images/2.jpg" style="position:absolute; top:0; left:0; opacity:0.3; filter:alpha(opacity=30); z-index:10;" />
35. <img src="../images/2.jpg" style="position:absolute; top:0; left:0; clip:rect(0 0 0 0); z-index:100;" />
36.</div>
37.<form action="41.php" method="post">
38. <input type="submit" value=" 提交 " />
39. <input type="hidden" id="imgInfor" name="imgInfor" />
40.</form>
41.<script type="text/javascript">
42.(function(){
43. var div=document.getElementById('picDiv'),
44. ul=div.getElementsByTagName('ul')[0],
45. li=ul.getElementsByTagName('li');
46. divdivW=div.offsetWidth-2,
47. divdivH=div.offsetHeight-2,
48. see=function(){
49. var t=ul.offsetTop,
50. l=ul.offsetLeft,
51. r=l+ul.offsetWidth,
52. f=t+ul.offsetHeight;
53. div.getElementsByTagName('img')[1].style.clip='rect('+t+'px '+r+'px '+f+'px '+l+'px)';
54. document.getElementById('imgInfor').value="{'x':'"+l+"','y':'"+t+"','w':'"+ul.offsetWidth+"','h':'"+ul.offsetHeight+"','url':'"+div.getElementsByTagName('img')[1].src+"'}";
55. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
56. },
57. clear=function(o){
58. if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
59. document.onmouseup=function(){
60. if(!-[1,]){o.releaseCapture();}
61. document.onmousemove=null;
62. document.onmouseup=null;
63. };
64. return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
65. };
66. if(!-[1,]){
67. var cDiv=document.createElement('div');
68. cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
69. ul.appendChild(cDiv);
70. }
71. ul.onmousedown=function(e){
72. ee=e||window.event;
73. var oldX=e.clientX-ul.offsetLeft,
74. oldY=e.clientY-ul.offsetTop,
75. maxW=divW-ul.offsetWidth,
76. maxH=divH-ul.offsetHeight;
77. document.onmousemove=function(e){
78. ee=e||window.event;
79. var newX=e.clientX-oldX,newY=e.clientY-oldY;
80. newXnewX=newX<0?0:newX>maxW?maxW:newX;
81. newYnewY=newY<0?0:newY>maxH?maxH:newY;
82. ul.style.top=newY+'px';
83. ul.style.left=newX+'px';
84. see();
85. };
86. clear(this);
87. };
88. for(var i in li){
89. li[i].onmousedown=function(e){
90. ee=e||window.event;
91. var oldX=e.clientX,
92. oldY=e.clientY,
93. oldT=ul.offsetTop+2,
94. oldL=ul.offsetLeft+2,
95. oldW=ul.offsetWidth,
96. oldH=ul.offsetHeight,
97. minW=50,minH=50,
98. _method=this;
99. if(e.stopPropagation){
100. e.stopPropagation();
101. }else{
102. e.cancelBubble=true;
103. }
104. document.onmousemove=function(e){
105. ee=e||window.event;
106. var lis={'w':'tr,mr,fr','h':'fl,fc,fr','l':'tl,ml,fl','t':'tl,tc,tr'};
107. if(lis.w.indexOf(_method.className)>-1){
108. var w=e.clientX-oldX+oldW;
109. ww=w<minW?minW:w>divW-oldL?divW-oldL:w;
110. ul.style.width=w+'px';
111. }
112. if(lis.h.indexOf(_method.className)>-1){
113. var h=e.clientY-oldY+oldH;
114. hh=h<minH?minH:h>divH-oldT?divH-oldT:h;
115. ul.style.height=h+'px';
116. if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug
117. }
118. if(lis.l.indexOf(_method.className)>-1){
119. var l=e.clientX-oldX+oldL;
120. ll=l<0?0:l>oldW+oldL-minW?oldW+oldL-minW:l;
121. ul.style.left=l+'px';
122. ul.style.width=oldW+oldL-l+'px';
123. }
124. if(lis.t.indexOf(_method.className)>-1){
125. var t=e.clientY-oldY+oldT;
126. tt=t<0?0:t>oldH+oldT-minH?oldH+oldT-minH:t;
127. ul.style.top=t+'px';
128. ul.style.height=oldH+oldT-t+'px';
129. if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=oldH+oldT-t+'px';}//ie6下高度不变bug
130. }
131. see();
132. };
133. clear(this);
134. };
135. }
136. see();
137.})();
138.</script>
139.</body>
140.</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;}
#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代码

1.<?php
2.
3.$img=json_decode(str_replace("\\'",'"',$_POST['imgInfor']),true);
4.
5.$old = imagecreatefromstring(file_get_contents($img['url']));
6.
7.if(function_exists("imagecreatetruecolor")){
8. $new=imagecreatetruecolor($img['w'],$img['h']); // 创建目标图gd2
9.}else{
10. $new=imagecreate($img['w'],$img['h']); // 创建目标图gd1
11.}
12.imagecopyresampled ($new,$old,0,0,$img['x'],$img['y'],$img['w'],$img['h'],$img['w'],$img['h']);
13.
14.imagejpeg($new,'img\\'.getip().'_'.time().'.jpg');
15.
16.@header("Content-type: image/jpeg");
17.
18.imagejpeg($new);
19.
20.imagedestroy($new);
21.
22.function getip(){
23. if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){
24. $ip = getenv("HTTP_CLIENT_IP");
25. }else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){
26. $ip = getenv("HTTP_X_FORWARDED_FOR");
27. }else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){
28. $ip = getenv("REMOTE_ADDR");
29. }else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){
30. $ip = $_SERVER['REMOTE_ADDR'];
31. }else{
32. $ip = "unknown";
33. }
34. return ($ip);
35.}
36.?>

复制代码

文库|博客

如果有一天21

家境小康

论坛徽章:: 0

2楼 [报告]

发表于 2012-01-19 22:24 |只看该作者

谢谢分享

实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？

返回列表

Chinaunix › 论坛 › 程序设计 › PHP › php文档中心 › JS简易图片裁剪-多点移动