javascript - Submitting HTML and CSS coordinates and values with jQuery on a user submit -

I am working on a web app where users drag and drop on an image. Ideally, I want to use my to be able to save my image with overlays text. To do this, I plan to use PIL (Python Imaging Library) to recreate the photo in backend. I am making

Submit to an HTML Form I want to send the values ​​of the coordinates of the four corners of an image. , Coordinates of any overlays text, with their hex color and font size.

Is it possible to capture all this with jQuery or JavaScript?

In this JS Fraudle, the text is dragable, say that the user transmits the text on the image. To recreate the image (with the text that the user was dragged) I would need the coordinator where the text was drawn. Is x coordinates of xy for an HTML element possible with jQuery?

  & lt; Div id = "draggable" class = "ui-widget-content" & gt; & Lt; P & gt; Drag me around & lt; / P & gt; & Lt; / Div & gt; & Lt; Img src = "http://imgur.com/JS1HXFw.jpg" & gt; $ ("# Draggable"). Drug Gables (); Click (function (event) {var photoCoords = $ ("img"). Position ();})  

---

  $ ("# capture" code> < / Pre> 
 Why do I have any idea of ​​getting undefined for different photos in the console?   
 
 
 You can either  
  $ (selector) .offset ();  
 
 or 
 
  $ (selector). Position ();  
 
 to get the coordinates of an element while  offset  gives you the coordinates relative to the element,  position  Offsets of Gives coordinates in relation to parents. 
 
 In the example, both of you will return the same as the offset parent for the  #draggable , in fact your body Of 0,0 relatives. 
 
 In the case of your use, as I think, you might get both  #draggable  and image  offset  And pass it to the server. Coordination of both elements ( top  and  left ), you can easily set their position relative to each other and everything should be done to create a composed image in question.