How to capture coordinates of image using jsp and servlet?

Question

I want to generate a function where I upload a picture and when I click on the image, the x, y coordinates of the point I clicked will be captured and stored inside MySQL database.

Anyone can suggest how to do it ?

the function code that will capture the coordinates when I click on the image. — linnndaaa, Jul 28 '15 at 06:29

score 1 · Answer 1 · answered Jul 28 '15 at 08:44

1

By far the most easiest method is using plain old <input type="image" src="...">. When clicking on it, browser will send the coordinates.

<form action="" method="post">
    <p>
        Clicking the following image will submit the form with 
        additional `x` and `y` parameters.
    </p>
    <input type="image" src="uploaded-image.png">
</form>

answered Jul 28 '15 at 08:44

Pavel Horal

17,782
3
65
89

1

It will work only on form submission, which will force the page to refresh. – Shrinivas Shukla Jul 28 '15 at 09:54

rhitz · Accepted Answer · 2015-07-28T09:02:49.250

In order to capture co-ordinates and store in database, you need to

Take the co-ordinates (x and y) using JavaScript.
Send the co-ordinates to JSP or Servlet using AJAX .
Store the values in database as usual way.

1. Using JavaScript to capture the co-ordinates.

To determine the exact x and y coordinates of a mouse event, use the following properties:

event.screenX, event.screenY (the screen x and y coordinates).
event.clientX, event.clientY (coordinates relative to the top left corner of the browser window or frame).

Here is the source code of the onclick event handler used in this example:

  //Function to call on Onclick Event 
  var a = document.getElementById('image_id');
  a.addEventListener('click',handleEvent); 

  //function to capture the co-ordinates
  function handleEvent(e){
  var evt = e ? e:window.event;
  var clickX=0, clickY=0;

  if ((evt.clientX || evt.clientY) &&
  document.body &&
  document.body.scrollLeft!=null) {
    clickX = evt.clientX + document.body.scrollLeft;
    clickY = evt.clientY + document.body.scrollTop;
  }

  if ((evt.clientX || evt.clientY) &&
  document.compatMode=='CSS1Compat' && 
  document.documentElement && 
  document.documentElement.scrollLeft!=null) {
   clickX = evt.clientX + document.documentElement.scrollLeft;
   clickY = evt.clientY + document.documentElement.scrollTop;
  }
  if (evt.pageX || evt.pageY) {
   clickX = evt.pageX;
   clickY = evt.pageY;
  }

  alert (evt.type.toUpperCase() + ' mouse event:'
   +'\n pageX = ' + clickX
   +'\n pageY = ' + clickY 
   +'\n clientX = ' + evt.clientX
   +'\n clientY = '  + evt.clientY 
   +'\n screenX = ' + evt.screenX 
   +'\n screenY = ' + evt.screenY
  )
   sendInfo(evt.clientX,evt.clientY); 
   return false;
 }

2. Send the co-ordinates to JSP or Servlet using AJAX

Code:

  function sendInfo(x,y)  
  {  

   var url="jspName.jsp?valX="+x+"&valY="+y;  

   if(window.XMLHttpRequest){  
   request=new XMLHttpRequest();  
  }  
  else if(window.ActiveXObject){  
   request=new ActiveXObject("Microsoft.XMLHTTP");  
  }  

  try  
  {  
   request.onreadystatechange=getInfo;  
   request.open("GET",url,true);  
   request.send();  
  }  
  catch(e)  
  {  
   alert("Unable to connect to server");  
  }  
 }  

 function getInfo(){  
  if(request.readyState==4){  
  var val=request.responseText;  
  alert("Succesful !! responseText is :"+val)
  }else{
   alert("Problem !!");
  }  
 }

3. Store the values in database from jspName.jsp.

This is the easy part.

Reference: Insert record into database

Points 1) and 2) are much easier (i.e. require less code to write) if one uses jQuery: 1) http://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery 2) http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get — Jozef Chocholacek, Jul 28 '15 at 07:22
A few comments and a working fiddle would make is much easier to understand. — Shrinivas Shukla, Jul 28 '15 at 07:40

Shrinivas Shukla · Answer 3 · 2015-07-28T08:16:33.857

If capturing the (X, Y) is your only problem, then the following function will help you.

function getXY(event) {
    var x = event.pageX - this.offsetLeft;             // get the relative X
    var y = event.pageY - this.offsetTop;             // get the relative Y
    alert('(' + x + ',' + y + ')');
    // Use AJAX to send data to server.
}

Check out this fiddle (Live Demo).

Here is the snippet.

function getXY(event) {
  var x = event.pageX - this.offsetLeft; // get the relative X
  var y = event.pageY - this.offsetTop; // get the relative Y
  alert('(' + x + ',' + y + ')');
  // Use AJAX to send data to server.
}

//register onclick listener
document.getElementById('image').addEventListener('click', getXY);

<img id='image' src='http://www.pinaldave.com/bimg/ilovesamples.jpg' />

How to capture coordinates of image using jsp and servlet?

3 Answers3

1. Using JavaScript to capture the co-ordinates.

2. Send the co-ordinates to JSP or Servlet using AJAX

3. Store the values in database from jspName.jsp.