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

Question

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

如何做到这一点？

谢谢。

Answer 1

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

根据您的更新，我添加了一些 javascript 来控制 mousedown 上的内部 div 的 x,y,w,h , mousemove和mouseup

注意:由于此 js 代码段使用 clientX/Y 和 offsetLeft/Top，因此下面的预览可能会因为帖子页面内的溢出容器而运行得有点偏差。我建议在全屏模式下查看“运行代码片段”。

var x,y,oldx,oldy;
var showDrag = false;
document.getElementById("cont").addEventListener("mousedown", function(e) {
  oldx = e.clientX; //mousedown x coord
  oldy = e.clientY; //mouedown y coord
  showDrag = true;
  e.preventDefault();
});
document.getElementById("cont").addEventListener("mousemove", function(e) {
  if (showDrag == true) {
    x = e.clientX; //mouseup x coord
    y = e.clientY; //mouseup y coord
    var bbox = document.getElementById("bbox");
    var contbox = document.getElementById("cont");
    //get the width and height of the dragged area
    var w = (x > oldx ? x-oldx : oldx-x);
    var h = (y > oldy ? y-oldy : oldy-y);
    var addx = 0, addy = 0;
    //these next two lines judge if the box was dragged backward
    //and adds the box's width to the bbox positioning offset
    if (x < oldx) { addx = w; }
    if (y < oldy) { addy = h; }
    bbox.style.left = (oldx-parseInt((contbox.offsetLeft+addx)))+"px";
    bbox.style.top = (oldy-parseInt((contbox.offsetTop+addy)))+"px";
    bbox.style.width = w+"px";
    bbox.style.height = h+"px";
    bbox.style.display = "block";
  }
  e.preventDefault();
});
document.getElementById("cont").addEventListener("mouseup", function(e) {
  showDrag = false;
  e.preventDefault();
});

div.focus-image {
  border:1px solid #dddddd;
  display:inline-block;
  position:relative;
  cursor:pointer;
}
div.focus-image div {
  display:none;
  border:2px solid red;
  position:absolute;
  left:90px; /*x*/
  top:60px; /*y*/
}

<div id="cont" class="focus-image">
  <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" />
  <div id="bbox"></div>
</div>