Convert pixels into relative cm from a clickable image?

Question

Hi,

Having a bit of a brain freeze on how to do this. I have an image of an area of a soccer field which the user clicks on to indicate where something occured.

I want to store the coordinates in real world units in my database so that I could change the image at a later time. However, I can't figure out the formula to do this (ignoring the fact that a soccer field has a variable length).

So say my image is 400 px by 300px representing a real-world field 12000cm x 9000cm, what would the point 300px,100px be in centimeters? How would I then convert this cm value back into px on an image that was 800x600 px? Doing it in yards/inches would also be acceptable.

Please show me the working rather than just the single values. Thanks!

Answer 1

just like any other unit conversion: 300 * 12000/400, 100 * 9000/300 is the point where the user click in the soccer field.

More generally, assuming the two scales have the same zeros (i.e. 0 source == 0 target) and you know a point where the scales equal x source == y target, then valueInTarget = valueInSource * (y / x).

Even more generally, assuming you know two points where two scales are equal, i.e. x1 source == y1 target and x2 source == y2 target, then valueInTarget == (valueInSource - x1) * (y2 - y1)/(x2 - x1) + y1 == (valueInSource - x2) * (y1 - y2)/(x1 - x2) + y2.

Answer 2

Use ratios. 400px represent 12000cm, so your width ratio is 30 centimeters per pixel. Applying that ratio to 300px gives us 9000cm.

In your second example, your width ratio is 15 centimeters per pixel (12000/800). So 9000cm gives 600px on the second image.

Same goes for the height.