reading image attributes in a web

[javaripper]

Hi ppl,

I have written a script that pops up a window with a picture loaded as content. Unfortunately I have to pass the size values of the target image (usually found in a subdirectory of the particular web i.e.

http://www.testweb.co.uk\image\cars\ford.jpg)

into the javascript call.

Can anyone suggest a method of interrogating the external image for size values if the path is given so that the script can read them and pass them into the window.open function creating the new window?

At the moment the script works great, but it is very labour intensive entering paths and image sizes etc etc.

Any help gratefully accepted.



Paul Wilkinson

Whitestar I.T. Ltd

http://www.whitestarit.co.uk

 

[sophisticate]

Now, I'm not a javascript programmer nor a browser DOM expert, so I could be way off base here.. But wouldn't it be possible just to put any arbitrary size in the window.open() call, then in the child window, have an onLoad event that calls window.resize() based on the height and width properties of the image?

Just a thought.

brendanc@icehouse.net

 

[grega]

sophisticate's suggestion is the way I currently have of doing it ...

<script language=&quot;javascript&quot;>

function openPic(imgLoc)
{
  img=new Image();
  img.src=imgLoc;

  // open the window and display the image
  winStr=&quot;scrollbars=no,resize=no&quot;
  myWin=window.open(&quot;&quot;,&quot;&quot;,winStr);
  myWin.document.write(&quot;<img src=\&quot;&quot; + imgLoc + &quot;\&quot;>&quot;);

  // get the image height + width, resize the window
  var w=myWin.document.images[0].width;
  var h=myWin.document.images[0].height;
  myWin.resizeTo(w,h);
}

</script>

You just need to pass it the location of the image, for example

<A HREF=&quot;javascript:openPic('images/myimage.jpg');&quot;>My Image</A>

I have tried other ways but can't figure out how to pick up the images dimensions until it has been displayed, i.e. once you create the new img object and assign it's src property, the width and height properties are still 0.

As I say, the above works but is messy in the sense that the user still sees the window being resized for a millisecond.

If there is a better way, I too would be interested.

Greg.

 

[palbano]

Hello All,

You are missing the Image.complete property. When you create a new Image object and assign it's .src property the browser requests the resource from the server. When the transfer has completed the .complete property is set to true and the image width and height are available.

var oImg = new Image();
oImg.src = "xxx/myimg.jpg";
while(!oImg.complete){

window.status = "waiting...";
}
alert("imgage width: " + oImg.width + " height: " + oImg.height);


Hope this helps
-pete

 

[grega]

Pete ... you're a star!

Greg.