0

Suppose we have a URL, as example, "//upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg".

How to get a top left (or any (x,y) coordinates) of this image using javascript (jQuery or Angular)?

P.S. Of course the image will belong to the same domain to avoid CORS issues.

P.P.S. The image is not in DOM yet.

Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • I have read that solution before question asked. No, it's for the image that ALREADY loaded in DOM. – Haradzieniec Sep 07 '17 at 13:17
  • Do you want the pixeldata from the image or its location in the DOM tree? – Emil S. Jørgensen Sep 07 '17 at 13:25
  • 2
    The solution Mosh links to will solve the problem. It doesn't matter if the image is in DOM or not. The only way to get a pixel is to use getImageData after drawing the image into canvas (unless you want to parse the image file manually). –  Sep 07 '17 at 13:27
  • take a look to this [fiddle](https://jsfiddle.net/vt458e3h/) – gaetanoM Sep 07 '17 at 14:23

1 Answers1

1

try this script 

<script>
elem = document.getElementById("img");//outer starts at your elem then walks out
var innerYValue = 0;
var innerXValue = 0;

while( elem != null ) {
    innerYValue += elem.offsetTop;
    innerXValue += elem.offsetLeft;
    elem = elem.offsetParent;
}

alert("x: "+innerXValue +"\ny: "+innerYValue);
</script>
Deepthy
  • 26
  • 1