js获取图片的坐标

废话不多说，上代码

	<img src="toImage.action" name="npcImg" id="npcImg" width="512" height="512" οnclick="vControl('GETMOUSEPOSINPIC',this)"/> 

下面是javascript部分

//点击图片 ， 获取图片上对应的坐标,这个坐标y轴是反着的，应该是负y，但显示出来是正y
var JPos = {};
(function($){
$.$getAbsPos = function(p){
var _x = 0;
var _y = 0;
while(p.offsetParent){
_x += p.offsetLeft;
_y += p.offsetTop;
p = p.offsetParent;
}

_x += p.offsetLeft;
_y += p.offsetTop;

return {x:_x,y:_y};
};

$.$getMousePos = function(evt){
var _x,_y;
evt = evt || window.event;
if(evt.pageX || evt.pageY){
_x = evt.pageX;
_y = evt.pageY;
}else if(evt.clientX || evt.clientY){
_x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
_y = evt.clientY + document.body.scrollTop - document.body.clientTop;
}else{
return $.$getAbsPos(evt.target);

}
return {x:_x,y:_y};
}
})(JPos);


function vControl(pChoice){
switch(pChoice){
case "GETMOUSEPOSINPIC":
var mPos = JPos.$getMousePos();
var iPos = JPos.$getAbsPos(arguments[1]);
window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y);
alert(window.status);
window.location.href="convertToActualCoordinate.action?status="+window.status;
break;
}
}

注意：此时获取的坐标中y轴的正负号是反着的，具体的不记得了，貌似y轴一直是正的，但如果将图片左上角作为原点的话，y轴应该为负，所以以下double y取值的时候加了个负号

//根据前台图片显示坐标换算出实际坐标点
	@RequestMapping("/convertToActualCoordinate")
	public String convertToActualCoordinate(String status,Model model) {
		//TODO
		System.out.println("当前的坐标是："+status);
		String[] coordinate = status.split(" ");
		double x = Double.parseDouble(coordinate[0]);
		double y = -Double.parseDouble(coordinate[1]);
		
		System.out.println("换算实际坐标前的x："+x);
		System.out.println("换算实际坐标前的y："+y);
		//slam发过来的地图大小像素是1024*1024，而网页显示的图片大小暂定是512*512，先转换成实际的地图大小
		System.out.println("width:"+width);
		System.out.println("height:"+height);
		float x1 =  (float) (width*x/512);
		float y1 =  (float) (height*y/512);
		//地图物理坐标与像素坐标变换 
		/*地图像素坐标以地图左上角端点为原点；物理坐标原点为地图中心点； 
		对于 1024*1024 的地图，地图中心点的像素坐标为（512，512），机器人在地图上物理坐标到像素坐标变
		换的解析为： 
		行：  512+x(m)/0.05  像素(pix) 
		列：  512-y(m)/0.05  像素(pix) 
		其中物理坐标（x，y）表示机器人的实际坐标，单位是  米(m)。 
		即：物理坐标（0，0.05）（米），地图上像素坐标为（512，513）（pix）。 */
		//现在换算的是物理坐标
		x1=(float) ((x1-width/2)*0.05);
		y1=(float) ((y1+height/2)*0.05);
		float yaw = (float) (y1/x1/3.14*180);
		System.out.println("换算成实际坐标后的x1："+x1);
		System.out.println("换算成实际坐标后的y1："+y1);
		System.out.println("换算成实际坐标后的yaw："+yaw);
		model.addAttribute("x", x1);
		model.addAttribute("y", y1);
		model.addAttribute("yaw", yaw);
		return "WEB-INF/pages/SlamNavigation/SlamNavigation";
	}