LinkBack URL
About LinkBacks
Multiple selection (bounding boxes) in displayed image
Hello,
I use a browser-based Java-Script to mark the upper left and lower right corner of a bounding box to save these coordinates for further processing (see below). Is there a way to create several of these coordinate-groups for multiple selections? The script does not produce a visible bounding box. I put the whole HTML below.
<head>
<title>Build crop frame</title>
<script type="text/javascript">
<!--
var Point = 1;
var X1, Y1, X2, Y2;
function FindPosition(oElement)
{
if( typeof( oElement.offsetParent ) != "undefined" )
{
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [ posX, posY ];
}
else
{
return [ oElement.x, oElement.y ];
}
}
function GetCoordinates(e)
{
var PosX = 0;
var PosY = 0;
var ImgPos;
ImgPos = FindPosition(myImg);
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
PosX = e.pageX;
PosY = e.pageY;
}
else if (e.clientX || e.clientY)
{
PosX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
PosY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
PosX = PosX - ImgPos[0];
PosY = PosY - ImgPos[1];
if (Point == 1)
{
X1 = PosX;
Y1 = PosY;
Point = 2;
document.getElementById("x1").innerHTML = PosX;
document.getElementById("y1").innerHTML = PosY;
}
else
{
X2 = PosX;
Y2 = PosY;
Point = 3;
document.getElementById("x2").innerHTML = PosX;
document.getElementById("y2").innerHTML = PosY;
}
document.getElementById("imgwidth").innerHTML = myImg.naturalWidth;
document.getElementById("imgheight").innerHTML = myImg.naturalHeight;
var x1 = document.getElementById("x1").innerHTML
var y1 = document.getElementById("y1").innerHTML
var x2 = document.getElementById("x2").innerHTML
var y2 = document.getElementById("y2").innerHTML
var Reswidth = myImg.naturalWidth / 20
var Resheight = myImg.naturalHeight / 20
var sleft = Math.round((x1 * 20) / (document.getElementById("imgwidth").innerHTML / 1000))
var stop = Math.round((y1 * 20) / (document.getElementById("imgheight").innerHTML / 1000))
var swidth = Math.round(((Reswidth - x1 - (Reswidth - x2)) * 20) / (myImg.naturalWidth / 1000))
var sheight = Math.round(((Resheight - y1 - (Resheight - y2)) * 20) / (myImg.naturalHeight / 1000))
document.getElementById("imgCoorRes").innerHTML = 'Selection \"'+sleft+' '+stop+' '+swidth+' '+sheight+'\"';
}
function Clear()
{
Point = 1;
document.getElementById("x1").innerHTML = '';
document.getElementById("y1").innerHTML = '';
document.getElementById("x2").innerHTML = '';
document.getElementById("y2").innerHTML = '';
document.getElementById("imgCoorRes").innerHTML = '';
}
function Save()
{
document.getElementById("imgwidth").innerHTML = myImg.naturalWidth;
document.getElementById("imgheight").innerHTML = myImg.naturalHeight;
var x1 = document.getElementById("x1").innerHTML
var y1 = document.getElementById("y1").innerHTML
var x2 = document.getElementById("x2").innerHTML
var y2 = document.getElementById("y2").innerHTML
var Reswidth = myImg.naturalWidth / 20
var Resheight = myImg.naturalHeight / 20
var sleft = Math.round((x1 * 20) / (document.getElementById("imgwidth").innerHTML / 1000))
var stop = Math.round((y1 * 20) / (document.getElementById("imgheight").innerHTML / 1000))
var swidth = Math.round(((Reswidth - x1 - (Reswidth - x2)) * 20) / (myImg.naturalWidth / 1000))
var sheight = Math.round(((Resheight - y1 - (Resheight - y2)) * 20) / (myImg.naturalHeight / 1000))
document.getElementById("imgCoorRes").innerHTML = 'Selection \"'+sleft+' '+stop+' '+swidth+' '+sheight+'\"';
}
function Initialisation()
{
document.form1.savebutton.disabled = true;
}
//-->
</script>
</head>
<body onload="Initialisation();">
<figure>
<img src="" id="myImgId" /><p>Click on the image to set the coordinates.</p>
</figure>
<p>width: <span id="imgwidth"></span>; height: <span id="imgheight"></span></p>
<br>
<p>The coordinates are: <span id="imgCoorRes"><span></p>
<p><strong>First Point:</strong> X: <span id="x1"></span>, Y: <span id="y1"></span></p>
<p><strong>Second Point:</strong>X: <span id="x2"></span> Y: <span id="y2"></span></p>
<form name="form1">
<input type="button" name="clearbutton" value="Clear" onclick="Clear();" />
</form>
<script type="text/javascript">
<!--
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
//-->
</script>
</body>
</html>
Reply With Quote
Originally Posted by zemiak
