可编辑图像框
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="https://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="https://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
2999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
