How to get a shape's X and Y axis coordinate location from a image by php or javascript?

Question

Its an image and I need to know the X and Y axis coordinate location (in px or anything) of the shape. For example-> The distance between the shape and the top of page or image is 20 px and left 15px. Is it possible by php or javascript?

Answer 1

Ok, so i assume you want to do this:

(given an image)

HTML:

<img id="img" src="image.png">

now, to get the x and y pos:

javascript:

function getCoordsOfElement(query) {
    var el = document.querySelector(query);
    var offset = el.getBoundingClientRect();

    return {
        x: offset.left,
        y: offset.top
    };
}

// get the x and y offset of the image
var offset = getCoordsOfElement('#img');