이미지를 클릭하고 좌표를 가져 와서 데이터베이스에 저장하십시오. JavaScript 및 Rails

JS 및 레일 문제가 있습니다. 이 큰 그림 (mamma.jpg) 내가이 그림의 아무 곳이나 클릭하면 스크립트가 표시됩니다 :이 방식으로 작동이미지를 클릭하고 좌표를 가져 와서 데이터베이스에 저장하십시오. JavaScript 및 Rails

<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(<%= asset_path 'mamma.jpg' %>);width:900px;height:720px;"> 
<img src=<%= asset_path '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>

: 저는 현재 사각형 이미지를 표시하기 위해이 코드를 사용하고 텍스트 필드에서 아래의 클릭 좌표. 또한 클릭 한 그림에 정사각형이 나타납니다.

이제 두 가지 문제가 있습니다. 1) 사각형을 클릭 한 위치와 상관없이 그림의 왼쪽 상단에 나타납니다. 거기에 대한 쉬운 수정이 있습니까?

2) 좌표를 데이터베이스에 저장해야하며이 페이지를 호출 할 때 이미지의 마지막 부분을 클릭 한 곳에 정사각형이 표시되어야합니다. 이미지는 양식의 일부입니다 (저는 formtastic도 사용합니다).

이제 Rails가 서버 측이며 JS가 클라이언트 측이며 직접 통신 할 수는 없다는 것을 알고 있지만 쉽게 해결할 수 있습니까? 아니면 내 컨트롤러를 통해이를 가능하게해야합니까?

미리 감사드립니다.

출처

2012-07-10 seppderdepp

이미 사용 가능한 라이브러리를 사용하여 사각형을 그립니다.

this 어플리케이션의 소스 코드는, 그것이 CSS 스프라이트의 x 및 y뿐만 아니라, 폭과 높이를 생성 JCrop 또는 http://odyniec.net/projects/imgareaselect/

체크 해보세요.

출처

2012-07-10 06:02:57 kiranvj

나는 무언가 자르기를 원하지 않는다. 나는 그것을 표시하고 싶다. 그래서 불행하게도 이것은 도움이되지 않을 것이다. ( – seppderdepp

생각 해봐라, 삭제할 것이다. – kiranvj

이미지를 클릭하고 좌표를 가져 와서 데이터베이스에 저장하십시오. JavaScript 및 Rails

답변

관련 문제