Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 14th, 2005, 05:53 AM
Friend of Wrox
 
Join Date: Nov 2005
Location: Rotterdam, , Netherlands.
Posts: 223
Thanks: 0
Thanked 0 Times in 0 Posts
Default Get image height and width

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
Reply With Quote
  #2 (permalink)  
Old December 14th, 2005, 11:45 AM
Authorized User
 
Join Date: Dec 2005
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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,
Reply With Quote
  #3 (permalink)  
Old December 15th, 2005, 04:20 AM
Friend of Wrox
 
Join Date: Nov 2005
Location: Rotterdam, , Netherlands.
Posts: 223
Thanks: 0
Thanked 0 Times in 0 Posts
Default

thnx mate,

Ill try this stuff out

This is my junk I'm gona eat it
Reply With Quote
  #4 (permalink)  
Old December 16th, 2005, 02:25 AM
Authorized User
 
Join Date: Dec 2005
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

u r welcom,
i hope it works?

one step between love and hate
Reply With Quote
  #5 (permalink)  
Old December 16th, 2005, 08:52 AM
Friend of Wrox
 
Join Date: Nov 2005
Location: Rotterdam, , Netherlands.
Posts: 223
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #6 (permalink)  
Old December 16th, 2005, 11:02 AM
Authorized User
 
Join Date: Dec 2005
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #7 (permalink)  
Old December 16th, 2005, 11:29 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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)
Reply With Quote
  #8 (permalink)  
Old December 16th, 2005, 12:02 PM
Authorized User
 
Join Date: Dec 2005
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #9 (permalink)  
Old December 16th, 2005, 03:46 PM
Authorized User
 
Join Date: Dec 2005
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #10 (permalink)  
Old December 20th, 2005, 05:59 AM
Friend of Wrox
 
Join Date: Nov 2005
Location: Rotterdam, , Netherlands.
Posts: 223
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 2: width/height mcleod BOOK: Professional XNA Game Programming: For Xbox 360 and Windows ISBN: 978-0-470-12677-6 5 May 24th, 2007 09:55 PM
get the height and width of an image with js crmpicco Javascript How-To 1 August 30th, 2006 11:26 PM
how can I get width/height of a picture? keyvanjan Classic ASP Basics 2 May 29th, 2006 07:29 AM
Finding Image width and height AlDugan XSLT 1 March 29th, 2006 05:37 PM
Height and Width? venkatesh_anmca Beginning VB 6 0 January 31st, 2005 05:13 AM



All times are GMT -4. The time now is 10:30 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.