473,326 Members | 2,173 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

intrinsic size of an Image

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.
Dec 4 '06 #1
13 2942
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
Dec 5 '06 #2
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='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.

---------------------------------------------------------------------------
http://www.hunlock.com -- Permanently under construction (And proud of it!)
$FA
Dec 5 '06 #3
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='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.

---------------------------------------------------------------------------
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="javascript">
function getImgHeight()
{
var test = new Image;
var test.src = document.getElementById('testImg');
alert(test.height);
}
</script>

Yep. Great from you pcx99 :)

--
Naixn
http://fma-fr.net
Dec 5 '06 #4
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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #5
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 ?
<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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #6
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>
--
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
Dec 5 '06 #7
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.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
---------------------------------------------------------------------------
http://www.hunlock.com -- Permanently under construction (And proud of it!)
$FA
Dec 5 '06 #8
ASM <st*********************@wanadoo.fr.invalidwrote 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.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>

IE6: first try = 30, try by cache = 447
FF1.5: first try = 0, try by cache = 447
Dec 5 '06 #9
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
Dec 5 '06 #10
On Dec 5, 12:58 pm, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
>
Thanks both of you.

I'ld like 'naixn' tries too and can see differences between two calls.
Here am I >

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

:)

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

Dec 5 '06 #11
ASM
dr*********@gmail.com a écrit :
On Dec 5, 12:58 pm, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
>I'ld like 'naixn' tries too and can see differences between two calls.

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.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #12
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?

<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
--
Those who desire to give up freedom in order to gain security,
will not have, nor do they deserve, either one.
-- Benjamin Franklin
Dec 11 '06 #13
Thomas 'PointedEars' Lahn wrote:
pcx99 wrote:
><script language='javascript'>

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.

--
Bart

Dec 11 '06 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Jeremy Cowles | last post by:
I have been reading a book that focuses on understanding the intrinsic types of C++ in depth. The author's mentality is this: "Understand the intrinsic types, then learn the std types as needed...
9
by: Deepa | last post by:
Hi All, I'm facing problem displaying image of size 5000X5000 .My window size is smaller than image size so i'm not able to see the complete image.i can use scroll bars to view the image but i...
4
by: no-spam | last post by:
Hello, I have an HTML question that I'm not sure can be solved. I want to restrict the maximum size of an inline image. For example, I can force the image to be 200x200 if I do this: <img...
3
by: George M. Garner Jr. | last post by:
Is there an intrinsic to wrap the bswap x86 instruction. I have written a function to do this with inline assembler but I am wondering if an intrinsic wouldn't be a better solution. Regards, ...
2
by: Sanjeeva Reddy | last post by:
hai Anti Keskinen, i have used the following code MyListView->LargeImageList->ImageSize = gcnew System::Drawing::Size(100, 100); // Sets large image size to 100, 100 here i am getting error...
13
by: Alek Davis | last post by:
Hi, Is it possible to access intrinsic ASP objects, such as Request, from a .NET class. Say, I have a .NET library exposed via a COM or COM+ wrapper. Can this library retrieve the request info...
16
by: Frederick Gotham | last post by:
Inspired by page 219 of Nicolai M. Josuttis's book, I set out to write a class for an intrinsic array which would behave, to as far an extent as possible, like a container. Also though, I wanted no...
1
by: RYKLOU | last post by:
I am kinda new to php, but i do know what i am doing kinda, but i came across this error when i am trying to upload a file to my website. Fatal error: Allowed memory size of 8388608 bytes...
0
Debadatta Mishra
by: Debadatta Mishra | last post by:
Introduction In this article I will provide you an approach to manipulate an image file. This article gives you an insight into some tricks in java so that you can conceal sensitive information...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.