Convert absolute coordinates to relative coordinates

Question

I have an image where I can place markers wherever I click.: http://jsbin.com/ojahel/10/edit

I need to save those marker positions in a json array and then send it to the server. Which I have done. But the coordinates I'm sending are absolute I think. Because I need to use them in another page, and when I display the same image as before the markers are not in the same position, since they are not being place with coordinates relative to the image it self, but to the screen coordinates.

Any idea how I can convert them when I submit the form, and then another function to "convert" the relative coordinates to absolute when I display the image in another page?

Answer 1

i think you have to find out at which coordinates your image is placed on the first page. Let us call them x_abs(picture),y_abs(picture). Then you can compute the relative coordinates of the marker by

x_rel(marker) = x_abs(marker) - x_abs(picture)
y_rel(marker) = y_abs(marker) - y_abs(picture)

On the next page you have to find out again where your image is placed, and retain the absolute coordinates of the marker by

x_abs(marker) = x_rel(marker) + x_abs(picture)
y_abs(marker) = y_abs(marker) + y_abs(picture)

Note that x_abs(picture),y_abs(picture) are now referring to the absolute coordinates of the picture in the second page. Hope that helps