javascript-可编辑图片框

编辑图像框
1、目标
可方便的调整图片的尺寸
2、图像框大小
1.浏览器窗口大小
期望图像框大小为浏览器窗口大小
一种方法是通过window.innerWidth、window.innerHeight获得浏览器窗口的宽高
测试代码如下:
1 <html>
2 <script language="javascript">
3 <!--
4 document.write(window.innerWidth + " "+ window.innerHeight);
5 //-->
6 </script>
7 </html>
测试结果如下:
1280 554
符合我们的要求
2.图像框大小
我们希望图像框的宽度比浏览器宽度稍窄,图像框的高度等于浏览器高度
因为我们希望除在图像框右侧显示一些信息,不能让图像框占据了整个浏览器窗口
我们创建一个table,table的左侧为图像框,table的右侧为显示信息
代码如下:
 1 <html>
 2 <table border="1">
 3 <tr>
 4 <td id="td1">
 5 <img id="img" src="" alt="" />
 6 </td>
 7 <td id="td2">
 8 </td>
 9 </tr>
10 </table>
11 <script language="javascript">
12 <!--
13 var node_img = document.getElementById("img");
14 var node_td1 = document.getElementById("td1");
15 var node_td2 = document.getElementById("td2");
16 node_img.src = "";
17 node_td1.style.width = window.innerWidth - 100;
18 node_td1.style.height = window.innerHeight - 30;
19 node_td2.style.width = 100;
20 node_td2.style.height = window.innerHeight - 30;
21 //-->
22 </script>
23 </html>
3.图像框大小
在上面的测试中,为了让我们方便地看到框,增加了border="1",在这个基础上为了使浏览器不必上下滑动,我们让图像框的高度比浏览器的高度稍短,至此图像框大小确定
3、可编辑尺寸图像
1.加载图像
在上面代码的基础上
设置img的src,并且设置img的width和height
把图像放在左侧框的中间
使用图片如下:

代码如下:
 1 <html>
 2 <table border="1">
 3 <tr>
 4 <td id="td1" align="center" valign="middle">
 5 <img id="img" src="//images0.cnblogs.com/blog/397725/201304/17102829-98aef8b20a9c47f6aa83f6881c4dd403.png" alt="" />
 6 </td>
 7 <td id="td2">
 8 </td>
 9 </tr>
10 </table>
11 <script language="javascript">
12 <!--
13 var node_img = document.getElementById("img");
14 var node_td1 = document.getElementById("td1");
15 var node_td2 = document.getElementById("td2");
16 node_td1.style.width = window.innerWidth - 100;
17 node_td1.style.height = window.innerHeight - 30;
18 node_td1.style.overflow = "hidden";
19 node_td2.style.width = 100;
20 node_td2.style.height = window.innerHeight - 30;
21 node_img.style.width = ((parseInt(window.innerWidth + "") - 100) / 2) + "px";
22 node_img.style.height = ((parseInt(window.innerHeight + "") - 30) / 2) + "px";
23 //-->
24 </script>
25 </html>
对于效果,大家可自行尝试
2.当鼠标在图像边界区域时改变光标
最终得到的代码如下:
  1 <html>
  2 <table border="1">
  3 <tr>
  4 <td id="td1" align="center" valign="middle" onmousemove="move();" onmousedown="down();" onmouseup="up();" onmouseout="up();">
  5 <img id="img" src="//images0.cnblogs.com/blog/397725/201304/17102829-98aef8b20a9c47f6aa83f6881c4dd403.png" alt="" />
  6 </td>
  7 <td id="td2" valign="middle">
  8 mouse_point<input type="text" id="mouse_point" value="" /><br/>
  9 image_size<input type="text" id="image_size" value="" />
 10 </td>
 11 </tr>
 12 </table>
 13 <script language="javascript">
 14 <!--
 15 var node_img = document.getElementById("img");
 16 var node_td1 = document.getElementById("td1");
 17 var node_td2 = document.getElementById("td2");
 18 var node_mouse_point = document.getElementById("mouse_point");
 19 var node_image_size = document.getElementById("image_size");
 20 
 21 node_td1.style.width = window.innerWidth - 100;
 22 node_td1.style.height = window.innerHeight - 30;
 23 node_td1.style.overflow = "hidden";
 24 node_td2.style.width = 100;
 25 node_td2.style.height = window.innerHeight - 30;
 26 var img_width;
 27 var img_height;
 28 var img_center_x = (parseInt(node_td1.style.width + "") / 2 - 20);
 29 var img_center_y = (parseInt(node_td1.style.height + "") / 2 + 10);
 30 img_width = (parseInt(window.innerWidth + "") - 100) / 2;
 31 img_height = (parseInt(window.innerHeight + "") - 30) / 2;
 32 node_img.style.width = parseInt(img_width + "") + "px";
 33 node_img.style.height = parseInt(img_height + "") + "px";
 34 var status = -1;
 35 var point_x;
 36 var point_y;
 37 // 移动光标
 38 function move()
 39 {
 40 // 鼠标左键为按下状态
 41 if(status != -1) {
 42 node_td2.innerHtml = "status != -1";
 43 // 当前光标位置
 44 var new_point_x = parseInt(event.clientX + "");
 45 var new_point_y = parseInt(event.clientY + "");
 46 // 获得新的图像的宽度和高度
 47 var new_img_width = img_width;
 48 var new_img_height = img_height;
 49 // 左上
 50 if(status == 0) {
 51 new_img_width = img_width + (point_x - new_point_x) * 2;
 52 new_img_height = img_height + (point_y - new_point_y) * 2;
 53 // alert(img_width + " " + img_height + ";" + new_img_width + " " + new_img_height);
 54 }
 55 // 左下
 56 else if(status == 1) {
 57 new_img_width = img_width + (point_x - new_point_x) * 2;
 58 new_img_height = img_height + (new_point_y - point_y) * 2;
 59 }
 60 // 右上
 61 else if(status == 2) {
 62 new_img_width = img_width + (new_point_x - point_x) * 2;
 63 new_img_height = img_height + (point_y - new_point_y) * 2;
 64 }
 65 // 右下
 66 else if(status == 3) {
 67 new_img_width = img_width + (new_point_x - point_x) * 2;
 68 new_img_height = img_height + (new_point_y - point_y) * 2;
 69 }
 70 //
 71 else if(status == 4) {
 72 new_img_width = img_width + (point_x - new_point_x) * 2;
 73 }
 74 //
 75 else if(status == 5) {
 76 new_img_width = img_width + (new_point_x - point_x) * 2;
 77 }
 78 //
 79 else if(status == 6) {
 80 new_img_height = img_height + (point_y - new_point_y) * 2;
 81 }
 82 //
 83 else if(status == 7) {
 84 new_img_height = img_height + (new_point_y - point_y) * 2;
 85 }
 86 if(new_img_width < 10) new_img_width = 10; // 保证宽度为正
 87 if(new_img_height < 10) new_img_height = 10; // 保证高度为正
 88 node_img.style.width = parseInt(new_img_width + "") + "px"; // 设置宽
 89 node_img.style.height = parseInt(new_img_height + "") + "px"; // 设置高
 90 // 更新图像宽高和光标位置
 91 img_width = new_img_width;
 92 img_height = new_img_height;
 93 point_x = new_point_x;
 94 point_y = new_point_y;
 95 // 更新宽高显示信息
 96 node_image_size.value = img_width + " " + img_height;
 97 // 更新光标位置信息
 98 node_mouse_point.value = point_x + " " + point_y;
 99 return;
100 }
101 
102 // 不在指定区域
103 if(parseInt(event.clientX + "") > img_center_x + img_width / 2 + 50 ||
104 parseInt(event.clientX + "") < img_center_x - img_width / 2 - 50 ||
105 parseInt(event.clientY + "") > img_center_y + img_height / 2 + 50 ||
106 parseInt(event.clientY + "") < img_center_y - img_height / 2 - 50
107 ) {
108 // 恢复光标状态
109 node_td1.style.cursor = "default";
110 node_mouse_point.value = event.clientX + " " + event.clientY;
111 return;
112 }
113 // 计算与四个边界的关系
114 var a = parseInt(event.clientX + "") > img_center_x - img_width / 2 - 50;
115 var b = parseInt(event.clientX + "") < img_center_x - img_width / 2;
116 var w = a && b;
117 a = parseInt(event.clientX + "") > img_center_x + img_width / 2;
118 b = parseInt(event.clientX + "") < img_center_x + img_width / 2 + 50;
119 var e = a && b;
120 a = parseInt(event.clientY + "") > img_center_y - img_height / 2 - 50;
121 b = parseInt(event.clientY + "") < img_center_y - img_height / 2;
122 var n = a && b;
123 a = parseInt(event.clientY + "") > img_center_y + img_height / 2;
124 b = parseInt(event.clientY + "") < img_center_y + img_height / 2 + 50;
125 var s = a && b;
126 // 左上
127 if(w && n) {
128 node_td1.style.cursor = "nw-resize";
129 }
130 // 左下
131 else if(w && s) {
132 node_td1.style.cursor = "sw-resize";
133 }
134 // 右上
135 else if(e && n) {
136 node_td1.style.cursor = "ne-resize";
137 }
138 // 右下
139 else if(e && s) {
140 node_td1.style.cursor = "se-resize";
141 }
142 //
143 else if(w) {
144 node_td1.style.cursor = "w-resize";
145 }
146 //
147 else if(e) {
148 node_td1.style.cursor = "e-resize";
149 }
150 //
151 else if(n) {
152 node_td1.style.cursor = "n-resize";
153 }
154 //
155 else if(s) {
156 node_td1.style.cursor = "s-resize";
157 }
158 // 其它
159 else {
160 node_td1.style.cursor = "pointer";
161 }
162 // 更新光标位置信息
163 node_mouse_point.value = event.clientX + " " + event.clientY;
164 }
165 
166 
167 // 按下鼠标左键
168 function down()
169 {
170 // 不在指定区域
171 if(parseInt(event.clientX + "") > img_center_x + img_width / 2 + 50 ||
172 parseInt(event.clientX + "") < img_center_x - img_width / 2 - 50 ||
173 parseInt(event.clientY + "") > img_center_y + img_height / 2 + 50 ||
174 parseInt(event.clientY + "") < img_center_y - img_height / 2 - 50
175 ) {
176 return;
177 }
178 // 计算与四个边界的关系
179 var a = parseInt(event.clientX + "") > img_center_x - img_width / 2 - 50;
180 var b = parseInt(event.clientX + "") < img_center_x - img_width / 2;
181 var w = a && b;
182 a = parseInt(event.clientX + "") > img_center_x + img_width / 2;
183 b = parseInt(event.clientX + "") < img_center_x + img_width / 2 + 50;
184 var e = a && b;
185 a = parseInt(event.clientY + "") > img_center_y - img_height / 2 - 50;
186 b = parseInt(event.clientY + "") < img_center_y - img_height / 2;
187 var n = a && b;
188 a = parseInt(event.clientY + "") > img_center_y + img_height / 2;
189 b = parseInt(event.clientY + "") < img_center_y + img_height / 2 + 50;
190 var s = a && b;
191 // 左上
192 if(w && n) {
193 status = 0;
194 }
195 // 左下
196 else if(w && s) {
197 status = 1;
198 }
199 // 右上
200 else if(e && n) {
201 status = 2;
202 }
203 // 右下
204 else if(e && s) {
205 status = 3;
206 }
207 //
208 else if(w) {
209 status = 4;
210 }
211 //
212 else if(e) {
213 status = 5;
214 }
215 //
216 else if(n) {
217 status = 6;
218 }
219 //
220 else if(s) {
221 status = 7;
222 }
223 // 其它
224 else {
225 status = -1;
226 }
227 // 记录光标位置
228 point_x = parseInt(event.clientX + "");
229 point_y = parseInt(event.clientY + "");
230 //
231 // node_td2.innerHtml = "status = " + status;
232 // alert("status = " + status);
233 }
234 // 松开鼠标左键,或者离开图像框
235 function up()
236 {
237 status = -1;
238 }
239 //-->
240 </script>
241 </html>
3.注意
有点浏览器可能不支持,本人测试通过的浏览器为Safari
25人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册