Re: dynamic PNG image generation

[email protected] ("r") Sun, 18 Nov 2001 15:54:06 -0500
Newsgroups php.lang
Organization sudent
Message-ID <[email protected]>
Put your image in its own file eg. yourimage.php and then call it from an
image tag's src property.

copied info for you:

And it is very commom that the image tag <img src='...'> is not provided
with image height and image width. Quite obvious, especially if the images
are linked from the directory on the harddrive and not from the database
when you could have the image dimmensions defined.

The result? Well... page starts with small square in the middle or whatever
and then suddenly expands because the image has been downloaded and now the
browser knows the image width and height.
The content jumps around, navigation and all the page elements get
replaced... you don't know where to click because everything moves...
The problem you can see on the other pages as well - Gallery for example -
but sometimes even the navigation images, few of them are downloaded/resized
the rest is not...
When I see something like that I have the impresion of Jumpy Pages - I think
it is not the way it should be.
And there is a very simple solution to avoid this "visual bug".

To do this you should look at the GetImageSize() function in PHP:

    array getimagesize (string filename [, array imageinfo])


It takes the image filename and determines the size of any GIF, JPG, PNG or
SWF ...
The optional imageinfo parameter is not important in this example and should
be left empty, refer to http://www.php.net/manual/function.getimagesize.php
for detailed informations.

What to do with the return value? As you can see we get the array of 4
elements containing:

    0 : width (pixels)
    1 : height (pixels)
    2 : type of the image (flag)
        1 = GIF
        2 = JPG
        3 = PNG
        4 = SWF
    3 : string with "height="yyy" width="xxx" (text)

All we need here is in the return array under the index 3, because we get
there the height and widht, in the way, we can use them directly in the
<img> tag.
Notice: you should use GetImageSize() function with @ parameter. It will
skip the error message if the image was not found (something like: Warning:
Unable to open images/myimage.jpg in ./scripts/viewimage.inc.php3 on line
29)

Example


        <php
            $img_file="images/myimage.jpg";
            $imgsize = @GetImageSize($img_file);
        ?>



Now if you want to include these informations inside HTML code, do it like
that:

        In PHP
        echo "<img src=\"".$img_file."\"  ".$imgsize[3]." border=0
alt=\"\">";

        In HTML:
        <img src="<?php echo $img_file; ?>"  <?php echo $imgsize[3]; ?>
border="0" alt="">


And what you get in the source of the HTML page is image tag, with correct
image dimmensions:

        <img width="456" height="200" src="images/myimage.jpg" border=0
alt="">


Simple isn't it? And you can use this code to avoid jumping not only on the
Picture Of The Day or Gallery page - simply use it on every image you
output - no more jumping elements of the page while loading.

It's nothing complicated I think, but it seems that somehow the web
developers miss it...