javascript－可编辑图片框
时间：2023-01-12阅读：25来源：柠檬博客作者：柠檬博客
可编辑图像框
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条评论
登录后显示评论回复