如何使用jsp和servlet捕获图像的坐标？

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.

我想生成一个上传图片的功能,当我点击图片时,我点击的点的x,y坐标将被捕获并存储在MySQL数据库中。

Anyone can suggest how to do it ?

任何人都可以建议怎么做?

3 个解决方案

#1

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

为了捕获坐标并存储在数据库中,您需要

1. Take the co-ordinates (x and y) using JavaScript.

使用JavaScript获取坐标(x和y)。

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

使用AJAX将坐标发送到JSP或Servlet。

3. 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:

要确定鼠标事件的确切x和y坐标,请使用以下属性:

1. event.screenX, event.screenY (the screen x and y coordinates).

event.screenX,event.screenY(屏幕x和y坐标)。

2. event.clientX, event.clientY (coordinates relative to the top left corner of the browser window or frame).

event.clientX,event.clientY(相对于浏览器窗口或框架左上角的坐标)。

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

以下是此示例中使用的onclick事件处理程序的源代码:

  //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

参考:将记录插入数据库

#2

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>

#3

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

如果捕获(X,Y)是您唯一的问题,那么以下功能将帮助您。

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).

看看这个小提琴(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' />