興味のある領域のWebページ内の画像に矩形をマーク

Question

関心領域を選択するWebページの画像に長方形をマークしたいと思います。意味は、Webページ上のイメージでは、マウスをクリックしてドラッグして長方形を描き、マウスを放すとx、y、w、hのセットを返すことができるようにしたいと考えています。

どうすればいいですか？

ありがとうございました。

Answer 1

だから、イメージを持っていて、画像の内側に四角形を描画できるようにしたいですか？

境界線付きの画像の内側に絶対配置されたdivを作成するだけです。

クリックの位置を取得する画像にmousedownハンドラを追加し、次にmouseupまでカーソル位置の現在位置のハンドラを追加します。

カーソルの現在の位置のハンドラで - divの寸法を設定します。 mouseupで、divのサイズを変更しないでください。

Answer 2

これは、小さな配置トリックで達成できます。相対的に配置されたdiv内のイメージを設定します。次に、画像を含むdiv内に絶対配置されたdivを作成することができます。これにより、ネストされたdivをイメージの前面に移動することができます。あなたの更新を1として

、私はX、Y、W、mousedownの時間、mousemoveとmouseup

は、NOTE、内側のdivのを制御し、いくつかのjavascript追加しました：これはスニペットはclientX/YとoffsetLeftを使用していますJS以来を/ Topでは、下のプレビューはポストページの内部にオーバーフローしたコンテナがあるため、少しオフになることがあります。フルスクリーンモードで「Run code snippet」を表示することをお勧めします。

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>