help with image size

**fedekiller** · 07-30-2006, 12:36 AM

well i need to know a remote image size :/ and the image is <img src="imgurl" width="40" height="40" /> so wheni do img.width i dont get the real width.
i tried with ajax and php but i have problems with remote images...
so if i can make this with javascript better

thanks in advanced

**mburt** · 07-30-2006, 01:35 AM

Code:

<html>
<head>
<script>
onload=function() {
var obj = document.getElementById("img")
alert("Width: " + obj.width + "\nHeight: " + obj.height)
}
</script>
</head>
<body>
<img src="imgurl" id="img" width="40" height="40" />
</body>
</html>

**fedekiller** · 07-30-2006, 02:58 AM

that returns 40x40

**mburt** · 07-30-2006, 03:02 AM

isn't that what you want?

**Twey** · 07-30-2006, 03:06 AM

mburt: No, he wants the *original* size of the image.

fedekiller: There are two ways we can go about this: getting the size from the image file, or creating an invisible image, letting it resize itself, then getting its calculated size. The former requires a server-side script; the latter is much trickier. Which is it to be?

If the former, you should probably post what you put together to do this originally.

**jscheuer1** · 07-30-2006, 04:08 AM

Well, this seems pretty simple and works in all except IE when launched for a local page (the local activeX 'protection bar' appears to interfere). However, it will work in Opera 9, FF 1.5.0.5, local and live, and IE 6 run live or after the activeX warning has been cleared for the session. I tested all three browsers with a fresh page load (navigating from Google) after clearing the cache:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getDim(id){
var im=document.getElementById(id);
var newIm=new Image();
newIm.src=im.src;
alert('width='+newIm.width+'\nheight='+newIm.height);
}
</script>
</head>
<body onload="getDim('theImg')">
<img id="theImg" src="http://home.comcast.net/~jscheuer1/side/1st.jpg" width="300" height="200">
</body>
</html>

The image is actually 1500x1000 and that gets reported faithfully in all three browsers as mentioned above.

**fedekiller** · 07-30-2006, 04:15 AM

thanks! ^^ i will test it

edit: it works ! :P thanks! :3

**Twey** · 07-30-2006, 01:33 PM

Aaah! I was thinking of creating an <img> element with visibility:hidden. Of course that's a much easier way.

**mburt** · 07-30-2006, 04:25 PM

Aside from all the details and everything, but why would you want to know the original size of an image? Just remove the width and height elements in the tag, and then right click the image, and hit properties, and there is your dimensions. It just seems very weird. But then again, there's usually a reason behind stuff like this..

**jscheuer1** · 07-30-2006, 05:52 PM

Twey,

That was somewhat my original thinking and interestingly enough, if you use just:

Code:

var newIm=document.createElement('img');

in place of:

Code:

var newIm=new Image();

it still works but, once I saw that, I figured, "Why not try the image object?"

Now, you mention this is 'easy' in PHP, I'm wondering how that goes, will it work before the page is parsed? I found a way to do this in ASP before the page is parsed but, it wasn't very simple. At least the example I found that worked wasn't very simple.

mburt,

The OP probably wants these dimensions for use with other code. You cannot be editing the page, clicking images and writing javascript each time this situation is encountered.

Thread: help with image size

Thread Tools

Search Thread

help with image size

Bookmarks

Bookmarks

Posting Permissions