By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,376 Members | 1,691 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,376 IT Pros & Developers. It's quick & easy.

How to get Natural image width and height?

P: n/a
Ben
Hi at all

I am looking for the natural size of an image

I found this function :

while ((imgHeight = image.getHeight(this)) == -1 ) {

// loop until image loaded

}

while ((imgWidth = image.getWidth(this)) == -1 ) {

// loop until image loaded

}

But firefox errors console write that getWidth is not a valid function

Pleae can you tell me if there is a wrong into my code or how can I get the
width and height of an images with others methods?

Thenk you very much
Jun 27 '08 #1
Share this Question
Share on Google+
10 Replies


P: n/a

"Ben" <be*@nospam.itwrote in message
news:Tz********************@twister2.libero.it...
Hi at all

I am looking for the natural size of an image
did you try to append some onload handler to the image?

let's say variable image stores reference to your dom image node. try this:

image.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
}
just writing from head now, but something like this should work...
cheers
Jun 27 '08 #2

P: n/a
SAM
Ben a écrit :
>
But firefox errors console write that getWidth is not a valid function
did you code it ?
or do you use prototype's library ?
<html>
<style type="text/css">
img { width: 100px; }
</style>
<script type="text/javascript">
function getSize(imgId) {
var i = document.getElementById(imgId);
var siz = function(what) {
what.widss = what.naturalWidth? what.naturalWidth : what.width;
what.heigt = what.naturalHeight? what.naturalHeight : what.height;
return what;
}
i = siz(i);
if(!i.widss) setTimeout(function(){getSize(imgId)},200);
else
return [i.widss, i.heigt];
}
window.onload = function() {
alert(getSize('V_2').join(' '));
}
</script>
All images displayed in 100px width :
<img src="http://i11.ebayimg.com/01/i/000/ed/13/575b_1.JPG" alt="" id="V_1"
onload="alert(this.width+' '+this.height);">
<img src="http://i16.ebayimg.com/01/i/000/ed/13/562b_1.JPG" alt="" id="V_2">
<img src="http://i3.ebayimg.com/03/i/000/e2/fe/aa08_1.JPG" alt="" id="V_3">
size of image #:
<select
onclick="alert(getSize('V_'+(+this.selectedIndex+1 )).join(' '))">
<option>1
<option>2
<option>3
</select>
</html>

--
sm
Jun 27 '08 #3

P: n/a
SAM
dino @ wrk a écrit :
>
let's say variable image stores reference to your dom image node. try this:

image.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
}
just writing from head now, but something like this should work...
if image was sized by CSS you'll get the CSS's size

prefer to try : naturalWidth naturalHeight
(after testing this attributes are known)

--
sm
Jun 27 '08 #4

P: n/a
Ugo
>let's say variable image stores reference to your dom image node. try this:
>>
image.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
}
just writing from head now, but something like this should work...

if image was sized by CSS you'll get the CSS's size
is not true!
prefer to try : naturalWidth naturalHeight
not standard
(after testing this attributes are known)
if YOU prefer to try naturalWidth..., it is more elegant using the OR
operator, so:
what.widss = what.naturalWidth || what.width;
instead of:
what.widss = what.naturalWidth? what.naturalWidth : what.width;
Jun 27 '08 #5

P: n/a
Ugo
>if image was sized by CSS you'll get the CSS's size
is not true!
sorry, that's true
Jun 27 '08 #6

P: n/a
Ugo
[cut]
how can I get the
width and height of an images with others methods?
I propose this way:

/* your function that manages the dimensione passed by param*/
function useDim( w, h )
{
alert( w );
alert( h );
}
/* "my" function that gets the dimensions and launches the function passed
by param (if defined)*/
function getSize( imgPath, fun )
{
var img = new Image( );

img.onload = function( )
{
if( fun = fun || null )
fun( this.width, this.height );
}

img.src = imgPath;
}

you can use this function into onload of the page or anyway in your code,
so:

getSize( 'images/img.gif', useDim );
Jun 27 '08 #7

P: n/a
SAM
Ugo a écrit :
>>if image was sized by CSS you'll get the CSS's size
is not true!

sorry, that's true
Me too I thought it wasn't :-)

It's only true if you set css's sizes via JS

<img style="width:100px" ...

where I expect we get :
- image.width (natural width)
- image.style.width (apparent width)
(height is proportionnal)

--
sm
Jun 27 '08 #8

P: n/a
SAM
Ugo a écrit :
[cut]
>how can I get the
width and height of an images with others methods?

I propose this way:
Unfortunately it seems that doesn't work with my Safari
(I think that it doesn't like 'onload' with new image !?)
/* "my" function that gets the dimensions and launches the function passed
by param (if defined)*/
function getSize( imgPath, fun )
{
var img = new Image( );

img.onload = function( )
{
if( fun = fun || null )
fun( this.width, this.height );
}

img.src = imgPath;
}

--
sm
Jun 27 '08 #9

P: n/a
Here is a cross browser example implementation of Hedger Wang
technique.
http://pastie.caboo.se/190528
Jun 27 '08 #10

P: n/a
Ugo
Unfortunately it seems that doesn't work with my Safari

I knew about some problems with Safari and own managment of onload image,
but I thought new versions had solved this bug
.... now I just tried with my Safari (win version) and works well, boh...
(I think that it doesn't like 'onload' with new image !?)
yes, the problem was that...
Jun 27 '08 #11

This discussion thread is closed

Replies have been disabled for this discussion.