2

I am working on a small PHP script, in a page I have a list of images like this :

<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.wired.com/wp-content/uploads/2015/09/google-logo-1200x630.jpg" >
</image>

what i need is to add a width and height attribute for each images so i can get this

    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.wired.com/wp-content/uploads/2015/09/google-logo-1200x630.jpg" width="1200" height="630" >
  </image>

PS: The width and the height of the image should be automatically calculated based on the link of the picture. Is it possible to do this using Jquery or javascript ?

Belatar Yassine
  • 153
  • 2
  • 10
  • why not getting the image size using PHP? Usign JS you need to perform another async call to that image before setting the attribute to the `image` tag – Roko C. Buljan Apr 13 '16 at 01:44
  • you can already do it using PHP script, you can make use of the php function getimagesize. http://php.net/manual/en/function.getimagesize.php – Oli Soproni B. Apr 13 '16 at 01:46
  • I can't do this using PHP because in this page all the info are submitted using jquery. The user press on add button and put the link then this image tag is generated using Jquery.@RokoC.Buljan – Belatar Yassine Apr 13 '16 at 01:47
  • You should provide the part of the code that generates the XML, nobody can help fix code that isn't there. – Jon Koops Apr 13 '16 at 01:50
  • Here is a link http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome – Oli Soproni B. Apr 13 '16 at 01:50

1 Answers1

2

You can load the image in javascript using an Image object. Then you can grab the widths and heights.

var img = new Image();
$("svg image").each(function() {
    var link = $(this).attr('xlink:href');
    img.src = link;
    $(this).attr('width', img.width);
    $(this).attr('height', img.height);
});

See:

https://jsfiddle.net/kfmvhokd/3/

Thomas
  • 429
  • 2
  • 10