How do I get the dimensions of an image?

[Cyclone]

I want to get the dimensions (width/height) of an image. I came across a way to do this from an image currently loaded on a page using an id and a DOM property…

But how can I do this using an image that isn’t loaded on a page? For example – using an image URL to get the dimensions. The page gets created first then the image is loaded, so I need to know the height of the image before the window loads.

Thanks.

[rangana]

You need server-side for this. You can use PHP's getimagesize().

[jscheuer1]

Actually you can do this with javascript, but you have to load the image, so would the server if it is to get its dimensions. In either case, this can be done without displaying the image or page first. Here's some basic javascript code, just to get the image's dimensions:

var getDims = function(im){
 var i = new Image(), w, h;
 i.onload = function(){
  w = i.width;
  h = i.height;
  /* do some other stuff here or call another function
   that depends upon knowing the image's dimensions 
   which are now w and h and may be passed as parameters */
 };
 i.src = im;
};

Usage:

getDims('URL_to_Image_File');

[Cyclone]

Thank you both.

jscheuer your code worked perfectly.

The image that I’m getting the dimensions from will be loaded in the page that opens so it probably doesn't matter as much that the image needs to be loaded to get the dimensions. But is there anyway around this? What if I needed to check the size of a 3mb jpeg? Don’t images contain EXIF info that could be checked?

Currently the way my page is setup, the page opens and loads the table instantly and the image would load last. But with this script nothing would load until the image has downloaded and the dimensions were checked by the script?

Thanks again.

[Nile]

I'm pretty sure I've asked this question(about the h and w) before.
(I don't get your question)

[jscheuer1]

@Nile,

I'm not sure what you are asking. I can say that once the image object is loaded, the width and height may be known to javascript. It is the onload event of the image object that ensures this. That's why the onload event should be defined before setting the image object's src property.

@Cyclone,

The image file's data (as separate from the entire image file) may only be accessed via server side code (exception - IE which will have the dimensions at the earliest stages of loading. if you can determine when that happens, and it is possible, that browser will have the dimension data very quickly, but others wait until the image is fully loaded to make that data available to javascript).

So theoretically the server would be faster. In real life it depends upon the image's byte size vs. the server load. If the byte size is relatively low, and the server load high, javascript will win the race. If on the other hand the server load is light and the image byte size is high, the server will win.

Many real life cases will be 'too close to call'.

It's your choice what to do with the commented area of the onload function. You can delay the load of the entire page for it, or perhaps just the drawing of the table, etc.

[Nile]

John, I wasn't asking anything but asking him to rephrase his question(post #4), as I did not get it. I was also pointing him to a thread that I've asked the same question, how to get the h and w.

[Cyclone]

@Nile,
It's your choice what to do with the commented area of the onload function. You can delay the load of the entire page for it, or perhaps just the drawing of the table, etc.

Hmm. I don't think there is a way to prevent the lag in the window opening since the size of the window is dependant on the height of the thumbnail (which is inside the same window).

http://www.inspiredvisuals.com/Pages...Blossoms2.html

See link for an example of what I need the image dimensions for.

If you hover your mouse over the 'Shot Info' link a window will pop up. The 'Shot Info' window displays an iframe and inside the iframe is a table which contains a thumbnail. Currently I manually type in the dimensions of the window. But I want to automate it.

The thumbnail size will vary which will change the table height. Since the 'Shot Info' window is created first I need to know the thumbnail height before hand.

@Nile --> Sorry for my poor wording. My brain is a bit cloudy today...

[jscheuer1]

Well, you could preload the image on the main page, then it's dimensions would be known when the time comes to pop it up. If this hasn't yet occurred, then and only then would it be necessary to calculate them on the fly.

Or, better yet, as if someone is in a hurry, there could be a delay - if the thumbnail's dimension are a set ratio of the large image already displayed, it's dimensions could be calculated from the larger image.

You should also consider optimising your images. 48K is a bit large for a 135 x 90 pixel image.

[Cyclone]

Good idea. That should work.

I agree the thumbnails are a bit big.

Thanks again for your help!