How to get Natural image width and height?

B

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
 
D

dino @ wrk

Ben said:
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
 
S

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>
 
S

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)
 
U

Ugo

let's say variable image stores reference to your dom image node. try this:
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;
 
U

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 );
 
S

SAM

Ugo a écrit :
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)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,481
Members
44,900
Latest member
Nell636132

Latest Threads

Top