Underlying image dimensions

[Csaba Gabor]

Is there any way to determine the pixel
height and width of an original image?

Specifically, If I have
<IMG id=myImg src="pic.jpg" height=200 width=300>
can I figure out what the original size of pic.jpg
is (had I not placed the height and width attributes
on the image, whether in the original tag or later
via javascript)?

Thanks,
Csaba Gabor from Vienna

[Evertjan.]

Csaba Gabor wrote on 14 mrt 2005 in comp.lang.javascript:

Is there any way to determine the pixel
height and width of an original image?

Specifically, If I have
<IMG id=myImg src="pic.jpg" height=200 width=300>
can I figure out what the original size of pic.jpg
is (had I not placed the height and width attributes
on the image, whether in the original tag or later
via javascript)?

<IMG id=myImg src="pic.jpg" height=200 width=300>

<img id=tempImg src="" style='display:none;'>

<script>
i = document.getElementById('myImg');
t = document.getElementById('tempImg');

t.src = i.src;
t.style.display='';
x = t.width+'x'+t.height;
t.style.display='none';
alert(x)
</script>

IE6 tested

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[RobG]

Csaba Gabor wrote:

Is there any way to determine the pixel
height and width of an original image?

Specifically, If I have
<IMG id=myImg src="pic.jpg" height=200 width=300>
can I figure out what the original size of pic.jpg
is (had I not placed the height and width attributes
on the image, whether in the original tag or later
via javascript)?

If the image height/width attributes have been set, then that is
what you will get - you can't reliably get the 'original' size
of the image. Below is a small test script to see what happens:

Note that Firefox's getComputedStyle is not exactly equivalent
to IE's currentStyle. Firefox always returns the size as px,
whereas IE may return 'auto' in some cases and if '%' or 'em' is
used for the width or height units, that is what IE returns.

My test image was the Google logo.
<style type="text/css">
.testImage {width: 75%; height: 75%}
</style>
<script type="text/javascript">
function getSize(a){
var msg = '';

// Check if attributes set:
if (a.height || a.width) {
msg += 'Height attribute: ' + a.height;
msg += '\nWidth attribute: ' + a.width;
}

// Check if style attributes set:
if (a.style) {
msg += '\n\nHeight style attribute: ';
msg += (a.style.height)? a.style.height : 'not set';
msg += '\nWidth style attribute: ';
msg += (a.style.width)? a.style.width : 'not set';
}

// Zilla: getComputedStyle
if (window.getComputedStyle) {
var h = document.defaultView.getComputedStyle(a,
'').getPropertyValue('height');
var w = document.defaultView.getComputedStyle(a,
'').getPropertyValue('width');
msg += '\n\nUsing getComputedStyle (h,w): ' + h + ', ' + w;

// IE: currentStyle
} else if (a.currentStyle) {
var h = eval('a.currentStyle.height');
var w = eval('a.currentStyle.width');
msg += '\n\nUsing currentStyle (h,w): ' + h + ', ' + w;
}

alert(msg);
}
</script>

<p>This image does not have the height/width
attributes defined</p>
<img src="1.gif" alt="" onclick="getSize(this);">

<p>This image has the height/width attributes
defined at full size</p>
<img src="1.gif" alt="" height="55" width="150"
onclick="getSize(this);">

<p>This image has the height/width attributes
defined at 27 x 75 using image attributes</p>
<img src="1.gif" height="27" width="75" alt=""
onclick="getSize(this);">

<p>This image has the height/width attributes
defined at 27 x 75 using style attributes</p>
<img src="1.gif" style="height: 27px; width: 75px;"
alt="" onclick="getSize(this);">

<p>This image has the height/width attributes
defined at 50% x 50% using style attributes</p>
<img src="1.gif" style="height: 50%; width: 50%;"
alt="" onclick="getSize(this);">

<p>This image has the height/width attributes
defined at 75% x 75% using CSS class</p>
<img src="1.gif" class="testImage"
alt="" onclick="getSize(this);">


--
Rob

[RobB]

Csaba Gabor wrote:

Is there any way to determine the pixel
height and width of an original image?

Specifically, If I have
<IMG id=myImg src="pic.jpg" height=200 width=300>
can I figure out what the original size of pic.jpg
is (had I not placed the height and width attributes
on the image, whether in the original tag or later
via javascript)?

Thanks,
Csaba Gabor from Vienna

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str****ict.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">

a { display: block; width: 90px; }

</style>
<script type="text/javascript">

function getRealDim(img_id)
{

function handler(img)
{
alert(
'width: ' + img.width +
'\nheight: ' + img.height
);
var el;
if ((document.getElementById
&& (el = document.getElementById(img_id)))
|| (document.all
&& (el = document.all[img_id]))
|| (el = document.images[img_id]))
{
el.width = img.width;
el.height = img.height;
}
}

var el;
if ((document.getElementById
&& (el = document.getElementById(img_id)))
|| (document.all
&& (el = document.all[img_id]))
|| (el = document.images[img_id]))
{
var oImg = new Image;
oImg.onload = function()
{
handler(this);
}
oImg.src = el.src;
}
}

</script>
</head>
<body>
<img
id="banana"
name="banana"
width="160"
height="109"
alt="banana"
border="0"
src="http://www.worlddreambank.org/B/BANASLUG.JPG" />
<a href="#null" onclick="getRealDim('banana')">actual size?</a>
</body>
</html>

[Csaba Gabor]

I appreciate all the responses (Evertjan, RobG, and RobB)
for how to find the size of an underlying image. The
code below works for me on Firefox 1.0.1 and IE 6

function findDim(img) {
var tmpImg = document.createElement("IMG");
tmpImg.src = img.src;
alert("W: " + tmpImg.width + " H: " + tmpImg.height);
}

also, it does NOT add to document.images
I have not investigated whether there is a hit to the
server but I suspect that an image would have to try
hard to accomplish that (ie. set no cacheing headers,
etc., which could actually be done). If that is the
case then this scheme could be defeated.

A similar approach that works in IE is:
tmpImg = img.cloneNode(false)
tmpImg.src = tmpImg.src
but I couldn't shore this up for Firefox.

Csaba Gabor from Vienna

[RobG]

Csaba Gabor wrote:

I appreciate all the responses (Evertjan, RobG, and RobB)
for how to find the size of an underlying image. The
code below works for me on Firefox 1.0.1 and IE 6

function findDim(img) {
var tmpImg = document.createElement("IMG");
tmpImg.src = img.src;
alert("W: " + tmpImg.width + " H: " + tmpImg.height);
}
Yup, seems to work fine, I didn't think of that approach. But
IIRC, Safari (and I think older versions of Firefox) do not
report height and width if they aren't set somehow as img
attributes or via the style object.

[...] A similar approach that works in IE is:
tmpImg = img.cloneNode(false)
tmpImg.src = tmpImg.src
Try:

var tmpImg = img.cloneNode(false);
tmpImg.removeAttribute('width');
tmpImg.removeAttribute('height');
tmpImg.src = tmpImg.src;

But why use 4 lines where 2 will do?
but I couldn't shore this up for Firefox.

Depends on what you call 'works'. Firefox reports the height
and width of the clone to be the same as the attributes set on
the original image, which is exactly what should happen:

"Cloning an Element copies all attributes and their
values,..."
<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-3A0ED0A4>

I'm not sure that replacing the image source should do anything
to the height and width attributes of the image element, Firefox
keeps the original attributes even if a new (different) image
src is used.

Do you have a reference anywhere? I would call that behaviour
an 'artifact' and therefore not necessarily dependable, even in
IE so test thoroughly.

If the original image does not have height and width specified,
both browsers return the 'true' height and width of the cloned
element.

--
Rob