how to get the real (unscaled) size of an embedded image in the svg document?! how to get the real (unscaled) size of an embedded image in the svg document?! xml xml

how to get the real (unscaled) size of an embedded image in the svg document?!


I figured out how to solve it entirely on the Javascript side level, without doing any XHR calls or whatever!

However, SVG doesn't have any dom functions to figure out the unscaled size of a picture.

Sollution!

Grab the SVGImageElement Object and it's URL from the attribute:

var myPicXE = document.getElementsByTagName('image')[0];var address = myPicXE.getAttribute('xlink:href');

create an Image Object and assign it's src addres:

var myPicXO = new Image();myPicXO.src = address;

and ask gently for it's height and width:

myPicXO.width;myPicXO.height;

should work also work wit base65jpeg inline images ( http://en.wikipedia.org/wiki/Data_URI_scheme )

That's it!


I did a little research and was unable to discover a property that you could enumerate to get the images actual width and height. However there was another approach which seemed interesting which included an xmlHttpRequest to get the image and enumerate it's dimensions.

That made me think of a slightly faster way. The solution is to utilize a hidden <div> as a working container and pulling down the necessary images (using <img>) where you can enumerate width and height there. This pseudoCode For example:

  • Iterate through collection of images
  • Create an image node with the appropriate src path
  • Append the new node to div#ImageEnumeration
  • Enumerate image retrieved

Just for grins (if it helps) here was a draft of some code for the xmlHttpRequest:

var imgRequest =   function(sImgUrl, oRequestCallback){    var xhr = new XMLHttpRequest();      xhr.open('GET', sImgUrl, true);      xhr.onreadystatechange = oRequestCallback;    xhr.send(null);      };var xhrImageRequest =  function(result){    var oImageDimensions;    //Create and append <img> to <div #ImageEnumeration>    //Get image width and height    //return image width and height    };var myImage = imgRequest("http://example.com/myImage.png", xhrImageRequest);

If this doesn't solve your problem, I hope it will at least create some new ideas in solving it.