intrinsic size of an Image

[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.

--
Elections only count as free and trials as fair if you can lose money
betting on the outcome.

[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 :)

--
Naixn
http://fma-fr.net

[pcx99]

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.

<img src="Someimage. jpg" ID='testImg' width=75 height=75>
<script language='javas cript'>
document.writel n(document.getE lementById('tes tImg').width+'< br>');
// returns 75 (the forced width of the IMG tag)
var test = new Image;
test.src = 'Someimage.jpg' ;
document.writel n(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.

---------------------------------------------------------------------------
http://www.hunlock.com -- Permanently under construction (And proud of it!)
$FA

[naixn]

pcx99 wrote :

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.

<img src="Someimage. jpg" ID='testImg' width=75 height=75>
<script language='javas cript'>
document.writel n(document.getE lementById('tes tImg').width+'< br>');
// returns 75 (the forced width of the IMG tag)
var test = new Image;
test.src = 'Someimage.jpg' ;
document.writel n(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.

---------------------------------------------------------------------------
http://www.hunlock.com -- Permanently under construction (And proud of it!)
$FA

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="javas cript">
function getImgHeight()
{
var test = new Image;
var test.src = document.getEle mentById('testI mg');
alert(test.heig ht);
}
</script>

Yep. Great from you pcx99 :)

--
Naixn
http://fma-fr.net

[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="javascrip t:sizeImg(docum ent.images[0].src)">img's size</a>

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

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[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.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/images/carte.jpg'
getImgHeight('h ttp://'+u;return false;"try</a>

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

<img src="someimage. jpg" id="testImg" />
<script language="javas cript">
function getImgHeight()
{
var test = new Image;
var test.src = document.getEle mentById('testI mg');
alert(test.heig ht);
}
</script>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[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.getEle mentById('testI mg');
alert(test.heig ht);
}
</script>
<p>
<a href="#" onclick="var u = 'stephane.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/1520/images/carte.jpg';
getImgHeight('h ttp://'+u);return false;">first try</a>
<p>
<a href="#" onclick="var u = 'stephane.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/1520/images/gestion_1.gif';
sizeImg('http://'+u);return false;">try by cache</a>
</html>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles

[pcx99]

ASM wrote:

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.getEle mentById('testI mg');
alert(test.heig ht);
}
</script>
<p>
<a href="#" onclick="var u = 'stephane.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/1520/images/carte.jpg';
getImgHeight('h ttp://'+u);return false;">first try</a>
<p>
<a href="#" onclick="var u = 'stephane.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/1520/images/gestion_1.gif';
sizeImg('http://'+u);return false;">try by cache</a>
</html>

First try: 0
second try: 447w 339h
---------------------------------------------------------------------------
http://www.hunlock.com -- Permanently under construction (And proud of it!)
$FA

[Jim Land]

ASM <st************ *********@wanad oo.fr.invalidwr ote in news:4574daee$0
$5************@ news.orange.fr:

ASM a écrit :

<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.getEle mentById('testI mg');
alert(test.heig ht);
}
</script>
<p>
<a href="#" onclick="var u = 'stephane.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/1520/images/carte.jpg';
getImgHeight('h ttp://'+u);return false;">first try</a>
<p>
<a href="#" onclick="var u = 'stephane.moria ux.'
u += 'perso.orange.f r/'; u += 'mac/1520/images/gestion_1.gif';
sizeImg('http://'+u);return false;">try by cache</a>
</html>

IE6: first try = 30, try by cache = 447
FF1.5: first try = 0, try by cache = 447

[ASM]

pcx99 a écrit :

ASM wrote:

>>>
Could you try with :

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.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date