Get image height and width

Dj Kat · December 14th, 2005, 05:53 AM

Hi,

Is there a way to get the image heigt and width of a image with javascript. I like to use a popup to view a image that has the same size as the popup.

thnx

This is my junk I'm gona eat it

Yahoa · December 14th, 2005, 11:45 AM

Hi,
yes there is a good one:

<script language=javascript>
function iwh(i)
{
x=new Image;
x.src=i;

iw=x.width;
ih=x.height;
alert("Image width is: "+iw+" pixels, and image height is: "+ih+" pixels.");
}
</script>

<img src=1.jpg onClick="iwh('1.jpg')">
<img src=2.jpg onClick="iwh('2.jpg')">

1-The script must be between the <head> tags,
2-The onClick event of the image must contain the image's url as an argument of the function.
This link is an exemple:http://www.rissala.shajara.net/p2p/iwh.htm

This are tow different methods to explain some parts of the script:

FIRST
<script language=javascript>
function iwh()
{
iw=document.images.img1.width;
ih=document.images.img2.height;
alert("Image width is: "+iw+" pixels, and image height is: "+ih+" pixels.");
}
</script>
<img src=1.jpg ID=img1 onClick="iwh()">
<img src=2.jpg ID=img2 onClick="iwh()">

img1 is the ID of the image that you should write to identify the image,

SECOND

It can be replaced by the number of the image in the page (the first is 0):
iw=document.images[0].width;
ih=document.images[0].height;

so in such case you can put just one time to get the width and height, so you pass the image number to the function as an argument of onClick="iwh(image_number)" :
yes there is a simple one:
<script language=javascript>
function iwh(x)
{
iw=document.images[x].width;
ih=document.images[x].height;
alert("Image number is : "+x+". Image width is: "+iw+" pixels, and image height is: "+ih+" pixels.");
}
</script>
<img src=1.jpg onClick="iwh(0)">
<img src=2.jpg onClick="iwh(1)">

THE WHOLE script with open new window:
<html>

<head>
<script language=javascript>

function iwh(i)
{

var iw;
var ih;

x=new Image;
x.src=i;

iw=x.width;
ih=x.height;
alert("Image width is: "+iw+" pixels, and image height is: "+ih+" pixels.");

// i saw it on :
//http://forums.devshed.com/archive/t-95918

Imagew=window.open('i.htm','Imagew',' width='+iw+',height='+ih+',toolbar=0

,resizable=0 ');

Imagew.document.write("<head><title>Image</title></head><body topmargin=0

leftmargin=0><img src="+i+" onClick='window.close();'>");

}

</script>
</head>

<body topmargin=100 ><center>

<a href="#" onClick="iwh('1.jpg')"><img src=1.jpg onClick="iwh('1.jpg')" height=150></a>
<a href="#" onClick="iwh('2.jpg')"><img src=2.jpg onClick="iwh('2.jpg')" height=150></a>

<center></body></html>

I hope that it helps,

Dj Kat · December 15th, 2005, 04:20 AM

thnx mate,

Ill try this stuff out

This is my junk I'm gona eat it

Yahoa · December 16th, 2005, 02:25 AM

u r welcom,
i hope it works?

one step between love and hate

Dj Kat · December 16th, 2005, 08:52 AM

It has a slight a slight problem,

It does work but only when the image is in my browsers cache.
You see I show thumbnails in the gallery so the true image hasn't been loaded yet at the first load.
The first time loaded the width and height wil have a value of 0
when in my browsers cache it will have the right width and height value.

Is there a way to read the width and hight value from the disk using javascript.

This is my junk I'm gona eat it

Yahoa · December 16th, 2005, 11:02 AM

well i have just tried it, yeah it gives, 0 * 0 px,
there is a way to preload images, i hope it will work, i haven't tried it yet but i am trying it now,
but there is problem if you have large size images, as it sould preload all images,
so you may add :
function preload()
{
i1=new image;
i1.src=i1.jpg;
}

and add an onLoad call to the function in the body tag <body onLoad="preload()">

i will try it and repost

one step between love and hate

joefawcett · December 16th, 2005, 11:29 AM

Thre's little point in adding a preload script to the onload event. Once the page has loaded then all iamges will have loaded.
You can get the image dimensions as stated above but only after it has finished downloading.
In script block in head:

Code:

var bImageLoaded = false;
var oImg = new Image();
oImage.onload = function(){bImageLoaded = true;};
oImg.src = <url>;

function showDimensions()
{
  if (bImageLoaded)
  {
    alert(oImage.height);
  }
  else
  {
    setTimeout(showDimensions, 500);
  }
}

If the image does not download for some reason this code will loop indefinitely so you'll need to handle that.

--

Joe (Microsoft MVP - XML)

Yahoa · December 16th, 2005, 12:02 PM

I will try the script Joe Fawcett, but for the showDimensions() function how is it called? I mean how it must be executed?

As for the one before wich didn't work, i have tried a new preload method i learned it from : http://www.w3c.org/TR/1999/REC-html4...1224/loose.dtd

It consists of preloading the images one bye one one in a table, i have just tried it and it worked even if the image hasn't loaded yet, it is on the same page on the site, this is the method :

function preload()
{
t=new Array();
t[1]=new Image;
t[1].src='i1.jpg';

t[2]=new Image;
t[2].src='i2.jpg';

t[3]=new Image;
t[3].src='i3.jpg';

}

and of course <body onLoad="preload()">

this one works fine, but there is still a problem if the size (in kb-not width) of your images are large.

one step between love and hate

Yahoa · December 16th, 2005, 03:46 PM

For the onLoad script it is a bit harder, so i will try later,
This is an automated one without need to declare every image & without onLoad event (i couldn't fix it yet), it waits until the image is loaded then it executes the getwidth and opens new window:

<script language=javascript>

function iwh(i)
{
x=new Image;
x.src=i;
t=new Array();
t[0]=x;

var iw;
var ih;

if (t[0].complete)
{
iw=t[0].width;
ih=t[0].height;

alert("Image width is: "+iw+" pixels, and image height is: "+ih+" pixels.");

// i saw it on :
//http://forums.devshed.com/archive/t-95918

Imagew=window.open('i.htm','Imagew',' width='+iw+',height='+ih+',toolbar=0,resizable=0 ');

Imagew.document.write("<head><title>Image</title></head><body topmargin=0 leftmargin=0><img src="+i+" onClick='window.close();'>");
};

}

</script>

But it may have some problems if the image size is so big the user may need to click again on it, i am working on the onLoad event and with a setTimeout fuction as it is better, so the script above is the most useful,

For the setTimeout:
----------------------
function f1()
{
}

function f2()
{
}

f2;

SetTimeout('f2', 1000);

----------------------------
Here we declare f1 and f2, then we execute f1, wait 1 second, and then executes f2, but it didn't work with my script.

why? the javascript needs just a little informations about the image so when 10kb of a 130kb image, he can get the dimensions without waiting to load all of the image.
I would like to know the avrage file size.

<script language=javascript>
function iwh()
{
function iwhp1(i)
{
x=new Image;
x.src=i;
}

function iwhp2()
{
var iw;
var ih;

iw=x.width;
ih=x.height;
alert("Image width is: "+iw+" pixels, and image height is: "+ih+" pixels.");

// i saw it on :
//http://forums.devshed.com/archive/t-95918

Imagew=window.open('i.htm','Imagew',' width='+iw+',height='+ih+',toolbar=0,resizable=0 ');
Imagew.document.write("<head><title>Image</title></head><body topmargin=0 leftmargin=0><img src="+i+" onClick='window.close();'>");
}

iwhp1;
setTimeout=('iwhp2', 1000);
}
</script>

If someone knows how it could be fixed, it would be great.
I am sorry to let you wait,

one step between love and hate

Dj Kat · December 20th, 2005, 05:59 AM

First of all thanx guys for the help.
It comes pretty close to the complete solution for the problem and I think this script is something that a lot of people could use

This is my junk I'm gona eat it