Javascript 在网页内的图像上标记矩形，以便选择感兴趣的区域

我想在网页中的图像上标记一个矩形，以便选择感兴趣的区域。这意味着，给定网页上的一个图像，我希望能够用鼠标单击并拖动它，在释放鼠标时，它将绘制一个矩形并返回一组x、y、w、h

如何做到这一点

---

谢谢。

这可以通过一点定位技巧来完成。在相对定位的div中设置图像。然后，您可以在包含图像的div内部创建一个绝对定位的div。这允许您围绕图像正面移动嵌套的div

根据您的更新，我添加了一些javascript，用于控制

mousedown

、

mousemove

和

mouseup

注意：由于此js代码段使用了clientX/Y和offsetLeft/Top，下面的预览可能会运行不太正常，因为它在post页面中有溢出容器。我建议以全屏模式查看“运行代码片段”

var x，y，oldx，oldy；
var showDrag=false；
document.getElementById（“cont”）.addEventListener（“mousedown”，函数（e）{
oldx=e.clientX；//鼠标向下x坐标
oldy=e.clientY；//mouedown y coord
showDrag=true；
e、 预防默认值（）；
});
document.getElementById（“cont”）.addEventListener（“mousemove”，函数（e）{
如果（showDrag==true）{
x=e.clientX；//鼠标x坐标
y=e.clientY；//鼠标y坐标
var bbox=document.getElementById（“bbox”）；
var contbox=document.getElementById（“cont”）；
//获取拖动区域的宽度和高度
var w=（x>oldx？x-oldx:oldx-x）；
var h=（y>oldy？y-oldy:oldy-y）；
var addx=0，addy=0；
//接下来的两行判断长方体是否向后拖动
//并将长方体的宽度添加到bbox定位偏移
如果（x
div.focus-image{
边框：1px实心#dddddd；
显示：内联块；
位置：相对位置；
光标：指针；
}
对焦图像分割{
显示：无；
边框：2倍纯红；
位置：绝对位置；
左：90px；/*x*/
顶部：60px；/*y*/
}
所以你有一个图像，你想在图像里面画一个矩形吗

只需在图像内部创建一个带边框的绝对定位div

将mousedown处理程序添加到获取单击位置的图像中，然后添加光标位置当前位置的处理程序，直到mouseup

在光标当前位置的处理程序中-设置div的尺寸。在mouseup上，停止调整div的大小。
谢谢您的回答！“我编辑了我的问题，以澄清我的意思。”米卢兹对迟来的答复表示抱歉。我已经更新了我的答案，添加了一个javascript代码段，用于控制带边框的div。希望这就是你的意思。