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

Question

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

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

Answer 1

到目前为止，最简单的方法是使用普通的<input type="image" src="...">。点击它时，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>

Answer 2

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

1. 使用JavaScript获取坐标（x和y）。
2. 使用AJAX将坐标发送到JSP或Servlet。
3. 按常规方式将值存储在数据库中。

1。使用JavaScript捕获坐标。

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

1. event.screenX，event.screenY（屏幕x和y坐标）。
2. event.clientX，event.clientY（相对于浏览器窗口或框架左上角的坐标）。

以下是此示例中使用的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。使用AJAX

将坐标发送到JSP或Servlet

代码：

  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。将值存储在jspName.jsp。

中的数据库中

这很容易。

参考：Insert record into database

Answer 3

如果捕获(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.
}

查看此fiddle (Live Demo)。

以下是摘录。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;