PDA

View Full Version : How do I get the dimensions of an image?



Cyclone
01-10-2009, 07:27 AM
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
01-10-2009, 09:20 AM
You need server-side for this. You can use PHP's getimagesize() (http://us.php.net/getimagesize).

jscheuer1
01-10-2009, 05:40 PM
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
01-11-2009, 03:49 AM
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
01-11-2009, 04:03 AM
I'm pretty sure I've asked this question(about the h and w) before (http://www.dynamicdrive.com/forums/showthread.php?t=28855).
(I don't get your question)

jscheuer1
01-11-2009, 05:17 AM
@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
01-11-2009, 05:18 AM
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
01-11-2009, 07:07 AM
@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/Photography/Flora/AppleBlossoms2.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
01-11-2009, 07:40 AM
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
01-11-2009, 07:58 AM
Good idea. That should work.

I agree the thumbnails are a bit big.

Thanks again for your help!

diltony
01-11-2009, 11:00 AM
The only other function available is to use a server script like php
to fetch the image...


<?php
$size = getimagesize("http://www.example.com/gifs/logo.gif");
?>

You can do this with ajax. You call the script dynamically with ajax to get the information that way the page will not need to be refreshed.
If you need this, you can send me an IM or contact me using www.contact.mwebng.net - just in case i am not on dd - then i will post the code in here.

Cyclone
01-12-2009, 04:17 AM
diltony,

I will let you know if I need any help. I want to try implementing the javascript way into my site first and see if it will make my site sluggish or not. Thanks.

Cyclone
01-13-2009, 07:20 AM
ok, I tired changing the table width on my page by getting the width of the image using javascript but it looks a bit glitchy. When the page first loads the table is very wide but then shrinks to the proper width after the page is fully loaded.

How can I get the page to load properly all at once?

http://www.inspiredvisuals.com/Pages/Photography/Flora/zzzz2.html

Thanks

EDIT

I figured out how to use javascript to write html when the page loads. It works perfect in IE but not Firefox. I have to reload the page...

http://www.inspiredvisuals.com/Pages/Photography/Flora/zzzz3.html

Not sure what i'm doing wrong. Sorry :confused:

diltony
01-14-2009, 06:14 AM
I wish to understand some things first before i paste any codes.I am tryin to avoid redundancy here.
Just why are you tryin to get the dimensions of the images?
If the problem is with resizing them - u can still resize them to aspect ratio u know?

for instance, i can write a small script that can help with pic sizing

<img src="images.php?src=photo1.gif&width=500&height=400&ratio=true">

That will resize the image such that the maximum width will not exceed 500px and the maximum height will not exceed 400px and maintain aspect ratio (no distortion)

<img src="images.php?src=photo1.gif&width=500&ratio=true">

The code above will make sure the width of the image is set to 500px and the height is set to the appropriate height. Aspect ratio maintained.

The advantage to this method over using ordinary html
<img src="dsdddd.jpg" width="82"/> is that if for instance the image is 2075 X 5000 on the server, it will take ages to load before the browser resizes it.
However if the resizing is done by php on the server, the page will get to load faster.


Now, if there are some images you wish to load into a webpage, you can get their dimensions as the page is loading.

If the images that you wish to load into the pages depend on the users, then u may want to tie ajax or something into it.

Based on what i have said, i want you to give me a clear picture of precisely which one u wish for, that way i can be sure of what script u require.

I will be watching this thread for your response.

jscheuer1
01-14-2009, 06:22 AM
IE will get the dimensions almost immediately upon the beginning of the process of loading the image. All others appear to need to completely load the image before the dimensions become available to the browser.

If you follow the code given previously:



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;
};

the width and height will be know in the green area of the function in virtually any browser and may be used for just about anything that you like.

However, there will be a lag between when getDims() is run and when the code in its green area will execute. This is equivalent to the amount of time required for the browser to download and cache the image.

Cyclone
01-14-2009, 07:09 AM
@diltony

There are two areas of my site that are dependent on the image size (the caption table on the main image page, and the "Shot Info" window that displays a thumbnail image along with some EXIF info).

Right now all I’m trying to do is automatically create the table on the main page with a width that is the same as the image.

The problem I’m having is that in Firefox the table gets created before the javascript has a chance to cache the image and determine it's width.

I want the page to load properly all at once without any changes in the page format. IE does it exactly the way I want... Firefox does not. See link in previous post. Open the link in IE after deleting your cache.

If PHP will not slow down my page too much then I can try that method but I would rather use JavaScript.


@jscheuer

I'm not sure how to execute that code when the page first loads and not get changes in the formatting of the page. I've tried a few different methods. Do I need a looped timer that checks if the image has finished downloading, then use document.write to write the html of the page? The DOM Image.complete property is not a W3C standard…

I haven't had the chance to try your code on the 'Shot Info' window but I thnik it should work since I can use the link to execute the code.

Thanks for the suggestions. Sorry for being a pain.

jscheuer1
01-14-2009, 07:22 AM
I'm not suggesting the use of the complete property of the image. And, you cannot document.write to the page after it is loaded anyway.

The code I sketched out uses the onload function of the image.

What you can do is set all or a portion of the page to display none, or visibility hidden. Then once you have your dimensions, set them for the elements and revel the contents.

Or once the dimensions are known, you could then open a page, passing the dimensions to it for its use.

Here is one scenario:


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 */
document.getElementById('mytable').style.width = w + 'px';
document.getElementById('mytable').style.visibility = 'visible';
};
i.src = im;
};


<table id="mytable" style="visibility:hidden;"> . . .

diltony
01-14-2009, 04:33 PM
Meanwhile, you can set a delay message

Something like "Please wait...." from the beginning of the page like this


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 */
document.getElementById('mytable').style.width = w + 'px';
document.getElementById('mytable').style.visibility = 'visible';
document.getElementById('waitmsg').style.display = 'none';
};
i.src = im;
};

<div id="waitmsg">
Please wait....
</div>

That will solve the delay problem 'cos the load event will wait for the image to be completed loaded.....

Cyclone
02-08-2009, 05:24 AM
jscheuer and diltony thanks for your great suggestions! Sorry it took so long to reply. I was going to reply when I finished testing out some other ways of doing the same thing and it took longer then I thought. Lol.

I tried three different ways of getting the image dimensions:

(1) Waiting for the image to fully download and then accessing its dimensions.
http://www.inspiredvisuals.com/test/JavaScriptDOM.html

(2) Using php getimagesize.
http://www.inspiredvisuals.com/test/PHP+Javascript.html

(3) Using ajax to access meta data from a file.
http://www.inspiredvisuals.com/test/test/test.html

The third way is the fastest but requires much more javascript knowledge which I don't have. :(