intrinsic size of an Image

A

Ari Krupnik

Image.width returns the width of an image as it is displayed on a
browser page, which may be different from the image's intrinsic size
if the 'img' element had a 'width' attribute specified. Is there a
reliable way to find an image's intrinsic dimensions, irrespective of
the size specified in HTML?

Ari.
 
N

naixn

Ari Krupnik wrote :
Image.width returns the width of an image as it is displayed on a
browser page, which may be different from the image's intrinsic size
if the 'img' element had a 'width' attribute specified. Is there a
reliable way to find an image's intrinsic dimensions, irrespective of
the size specified in HTML?

Ari.

JS interacts with DOM to get those values. That's why, as you noticed, JS may
not retrieve the original picture size. But JS has no way, as I know, to work
with files (apart from Internet Explorer, the alien browser).
You may try to work with XMLHttpRequest, or find another way.
Or wait for someone who may contradict me about the JS working with files :)
 
P

pcx99

Ari said:
Image.width returns the width of an image as it is displayed on a
browser page, which may be different from the image's intrinsic size
if the 'img' element had a 'width' attribute specified. Is there a
reliable way to find an image's intrinsic dimensions, irrespective of
the size specified in HTML?

Ari.

<img src="Someimage.jpg" ID='testImg' width=75 height=75>
<script language='javascript'>
document.writeln(document.getElementById('testImg').width+'<br>');
// returns 75 (the forced width of the IMG tag)
var test = new Image;
test.src = 'Someimage.jpg';
document.writeln(test.width); // returns real width of the picture.
</script>


Be aware that you'll need to test if the image is actually loaded before
testing width or you may get unpredictable results. This worked fine
when I tested it, but the image was in my browser's cache so do some
testing about how the various browsers return width when the image
hasn't fully (or started) loading yet.
 
N

naixn

pcx99 wrote :
<img src="Someimage.jpg" ID='testImg' width=75 height=75>
<script language='javascript'>
document.writeln(document.getElementById('testImg').width+'<br>');
// returns 75 (the forced width of the IMG tag)
var test = new Image;
test.src = 'Someimage.jpg';
document.writeln(test.width); // returns real width of the picture.
</script>


Be aware that you'll need to test if the image is actually loaded before
testing width or you may get unpredictable results. This worked fine
when I tested it, but the image was in my browser's cache so do some
testing about how the various browsers return width when the image
hasn't fully (or started) loading yet.

Oh yeah, good idea !

The answer would then be to work after body unload and have something like :
<img src="someimage.jpg" id="testImg" />
<script language="javascript">
function getImgHeight()
{
var test = new Image;
var test.src = document.getElementById('testImg');
alert(test.height);
}
</script>

Yep. Great from you pcx99 :)
 
A

ASM

Ari Krupnik a écrit :
Image.width returns the width of an image as it is displayed on a
browser page, which may be different from the image's intrinsic size
if the 'img' element had a 'width' attribute specified. Is there a
reliable way to find an image's intrinsic dimensions, irrespective of
the size specified in HTML?

Only way I know is :

<html>
<script type="text/javascript">
function sizeImg(urlImg) {
var I = new Image()
I.onload = function() { alert('w = '+I.width+'\nh = '+I.height); }
I.src = urlImg
}
</script>
<img src="http://www.google.fr/intl/en_com/images/logo_plain.png"
width="100" alt="">
<a href="javascript:sizeImg(document.images[0].src)">img's size</a>

<a
href="javascript:sizeImg('http://eur.i1.yimg.com/eur.yimg.com/i/fr/se/sycf.gif')">
Yahoo! logo size</a>
</html>
 
A

ASM

naixn a écrit :
The answer would then be to work after body unload and have something
like :

As you say that works after complete page loading and only with an image
already displayed or not in cache.

Could you try with :

<a href="#" onclick="var u = 'stephane.moriaux.'
u += 'perso.orange.fr/'; u += 'mac/images/carte.jpg'
getImgHeight('http://'+u;return false;"try</a>

and tell me if that has worked with this 40ko image ?
 
A

ASM

ASM a écrit :
Could you try with :

sorry there were some errors ...

<html>
<script type="text/javascript">
function sizeImg(urlImg) {
var I = new Image()
I.onload = function() { alert('w = '+I.width+'\nh = '+I.height); }
I.src = urlImg
}
function getImgHeight()
{
var test = new Image();
test.src = document.getElementById('testImg');
alert(test.height);
}
</script>
<p>
<a href="#" onclick="var u = 'stephane.moriaux.'
u += 'perso.orange.fr/'; u += 'mac/1520/images/carte.jpg';
getImgHeight('http://'+u);return false;">first try</a>
<p>
<a href="#" onclick="var u = 'stephane.moriaux.'
u += 'perso.orange.fr/'; u += 'mac/1520/images/gestion_1.gif';
sizeImg('http://'+u);return false;">try by cache</a>
</html>
 
P

pcx99

ASM said:
ASM a écrit :

sorry there were some errors ...

<html>
<script type="text/javascript">
function sizeImg(urlImg) {
var I = new Image()
I.onload = function() { alert('w = '+I.width+'\nh = '+I.height); }
I.src = urlImg
}
function getImgHeight()
{
var test = new Image();
test.src = document.getElementById('testImg');
alert(test.height);
}
</script>
<p>
<a href="#" onclick="var u = 'stephane.moriaux.'
u += 'perso.orange.fr/'; u += 'mac/1520/images/carte.jpg';
getImgHeight('http://'+u);return false;">first try</a>
<p>
<a href="#" onclick="var u = 'stephane.moriaux.'
u += 'perso.orange.fr/'; u += 'mac/1520/images/gestion_1.gif';
sizeImg('http://'+u);return false;">try by cache</a>
</html>


First try: 0
second try: 447w 339h
 
A

ASM

pcx99 a écrit :
First try: 0
second try: 447w 339h

Jim Land a écrit :
IE6: first try = 30, try by cache = 447
FF1.5: first try = 0, try by cache = 447

Thanks both of you.

I'ld like 'naixn' tries too and can see differences between two calls.
 
A

ASM

(e-mail address removed) a écrit :
Here am I >

Splendid :)
FF2.0 : first try = 0, try by cache = 447

And you've seen that image not in cache (1st try) can't give its size.

Also you were able to see that it was possible to load on the fly (in
the air) an image to know its size.
 
T

Thomas 'PointedEars' Lahn

pcx99 said:
<img src="Someimage.jpg" ID='testImg' width=75 height=75>

Invalid, the required `alt' attribute value is missing.
<script language='javascript'>

That is invalid, previous-century stuff. Until further notice, use this
instead:

<script type="text/javascript">

Please apply http://validator.w3.org/ on your markup before you post.
document.writeln(document.getElementById('testImg').width+'<br>');

document.writeln() may not be fully supported. Use document.write("...\n")
instead, if required. Also note that calling document.write...() after the
document was loaded is highly likely to overwrite the document's content.
// returns 75 (the forced width of the IMG tag)
var test = new Image;

Although not required, it is good style to use the Call Operator on
NewExpressions:

var test = new Image();
test.src = 'Someimage.jpg';
document.writeln(test.width); // returns real width of the picture.

Apart from the document.writeln() issue mentioned above, as followups have
proven this is not a reliable way of obtaining the image size. Because,
although ECMAScript implemetations so far are single-threaded, the API call
for retrieving the image data that is triggered by assigning a value to
`test.src' is independent of script execution. Sometimes `0' (or any other
value different from the truth) can and will be written, because the image
was not loaded yet.
Be aware that you'll need to test if the image is actually loaded before
testing width or you may get unpredictable results. This worked fine
when I tested it, but the image was in my browser's cache so do some
testing about how the various browsers return width when the image
hasn't fully (or started) loading yet.

There is a well-supported, yet proprietary, event handler for this:

test.onload = function()
{
window.alert(test.width);
};

test.src = "...";


PointedEars
 
B

Bart Van der Donck

Thomas said:
That is invalid, previous-century stuff.

Sheer academic. I use it all the time. I don't believe there is any
browser that has, or will ever have, a problem with this.
 

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

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top