PDA

View Full Version : 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
<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:


<!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 :D

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:


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

in place of:


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.

Twey
07-30-2006, 07:01 PM
Now, you mention this is 'easy' in PHP, I'm wondering how that goes, will it work before the page is parsed?Parsed by the server or by the browser? It will be done before the page is parsed by the browser, of course, but not by the server -- that would be impossible.

With the GD library, it's as simple as:
<?php $imginfo = getimagesize('/path/to/image.png'); ?>
Image size: <?php echo($imginfo[0] . 'x' . $imginfo[1]); ?>... yielding a result such as:
1500x1000

jscheuer1
07-30-2006, 07:20 PM
Parsed by the server or by the browser? It will be done before the page is parsed by the browser, of course, but not by the server -- that would be impossible.

My impression, at least of the way that it works in ASP/VBscript is that it happens as the server is parsing the document, when it gets to those lines. So, it would be before the entire page is parsed by the server allowing image dimensions to be written by the server to generated HTML code as it's instructions are parsed and it is generated. And, to be of much use for display purposes, well before the browser parses the page. But, my knowledge is limited with server side, the server my parse first, generate later - a two pass operation. I was thinking it happened in one pass, the way a browser does it unless onload is used.


With the GD library, it's as simple as:
<?php $imginfo = getimagesize('/path/to/image.png'); ?>
Image size: <?php echo($imginfo[0] . 'x' . $imginfo[1]); ?>... yielding a result such as:
1500x1000

Thanks for that code, it will likely come in handy at some point.

Twey
07-30-2006, 07:28 PM
Aha, I see what you mean. Yes, it is parsed as it's read, usually. However, output buffers can be used to store the output of the parsing operation, to be used elsewhere later. For example, by default:
<?php echo('Hello'); ?>... will simply output "Hello" to the output stream, to be sent directly to the browser. On the other hand,
<?php
ob_start();
echo('Hello');
$foo = ob_get_contents();
ob_end_clean();
?>... will start a sort of "virtual output stream," an output buffer, which will then capture any output instead of performing the default action of sending it to the browser. This output can then be retreived with ob_get_contents() and stored to memory, for later use. In this example, $foo contains "Hello" and no output has been sent to the browser.

There is an option in php.ini to turn on automatic output buffering, which effectively adds ob_start() to the beginning and ob_end_flush() to the end of each page.