CODEWITHSUNDEEP
javascriptjavahtml
AA24
AA24

Reputation: 47

Recording XY coordinates of pixel onclick

I'm trying to a find a way where I can click on individual pixels and then the XY coordinates of the pixel will be recorded/printed. I found the code below online, but it only shows the coordinates of the last-clicked pixel. Is there a way to save/print the coordinates of all the pixels that I have clicked. I'm doing this for a Java applet and this would make it much easier for me to make polygons. I would prefer the output (when I click the pixels) to be like this, so that I can just copy & paste into java:

int [] x={x1,x2,x3,x4,x...};
int [] y={y1,y2,y3,y4,y...};

Here is the code I found:

<html>
<head>
<script language="JavaScript">
function point_it(event){
	pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	document.getElementById("cross").style.left = (pos_x-1) ;
	document.getElementById("cross").style.top = (pos_y-15) ;
	document.getElementById("cross").style.visibility = "visible" ;
	document.pointform.form_x.value = pos_x;
	document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('image.jpg');width:2400px;height:1848px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form> 
</body>
</html>

Upvotes: 0

Views: 835

Answers (1)

sudhirk496
sudhirk496

Reputation: 74

<html>

<head>
  <script language="JavaScript">
    var x = [];
    var y = [];

    function point_it(event) {
      pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
      pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
      document.getElementById("cross").style.left = (pos_x - 1);
      document.getElementById("cross").style.top = (pos_y - 15);
      document.getElementById("cross").style.visibility = "visible";
      x.push(pos_x);
      y.push(pos_y);
      document.getElementById("form_x").innerHTML = x;
      document.getElementById("form_y").innerHTML = y;
    };

    function remove_it() {
      x.pop();
      y.pop();
      document.getElementById("form_x").innerHTML = x;
      document.getElementById("form_y").innerHTML = y;
    }
  </script>
</head>

<body>
  <form name="pointform" method="post">
    <div id="pointer_div" onclick="point_it(event)" style="background-image:url('image.jpg');width:2400px;height:1848px;">
      <img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;">
    </div>
    You pointed on
    <br>x = <span id="form_x"></span> 
    <br>y = <span id="form_y"></span>
    <br>
    <button onclick="remove_it()">remove last</button>
  </form>
</body>

</html>

Upvotes: 1

Related Questions