13

I have a SVG document with the image entry in it:

<image id="image12975" x="30" y="40" width="30" height="45"
xlink:href="img/Akira1.jpg">    
</image>

I have fetched the SVG Image in Javascript by doing:

var imgE = document.getElementsByTagName('rect');
document.getElementById('test').innerHTML = imgE;

brings me the [object SVGImageElement] in Javascript.

By iterating the object I have a full subset of functions and attributes. height and width of the function "getBBox()" bring me only the attribut values defined as width (30), and height (45).

I am looking for the real parameters, like I would open the picture alone, which are in reality width="300" and height="430" pixels.

for any support I would kindly thank you

Tamer

SmileMZ
  • 519
  • 5
  • 13
  • Can you explain what you are trying to do in your code snippet? It looks like you're assigning a NodeList to the innerHTML property of the "test" element. My understanding is that innerHTML should be a string; I'm not sure what happens when you assign to it an object (except I imagine that it might convert the object to its string representation, and attempt to parse that as HTML). In any case, hopefully you can clarify what this code is supposed to express. – jbeard4 Jul 30 '11 at 21:00
  • I try to get the usual size of the ebedded image in the SVG document. The usual size, is the size of the picture unscaled. However, it's solved. In a short time (after the time period expired) I will self answer this question. I figured out, that the SVG Image methods don't get me the desired informations to figure out the measure data, which is the picture itself in an unscaled status. – SmileMZ Jul 30 '11 at 23:52

2 Answers2

10

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!

edi9999
  • 19,701
  • 13
  • 88
  • 127
SmileMZ
  • 519
  • 5
  • 13
  • 1
    You should probably use getAttributeNS, rather than getAttribute, when dealing with a namespaced attribute like xlink:href. – jbeard4 Jul 31 '11 at 01:50
  • 2
    I think you mean `myPicXO.src = address`. But this won't work in Safari/Chrome. The dimensions there won't be available until after the load event. See e.g. http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome – mercator Jul 31 '11 at 17:35
3

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.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
a data chemist
  • 66
  • 2