Introduction to Image Manipulation in php + GD

Written By: Nathan Baker

- 24 Jul 2006 -
















Description: We all know that php is very useful for generating dynamic webpages. However, fewer people know that it is also useful for generating dynamic images! In this tutorial, I will guide you through generating image thumbnails on the fly.

  1. Introduction
  2. php: HTML++
  3. OK, I'm excited! Let's write the getImage function!
  4. That's it!

php: HTML++

What we want is a php function that will take the name of an image file on your server and some dimensions, and return that image scaled to those dimensions. There are a couple ways to do this, but the way I prefer is to have the php code generate the image directly and send it straight to the browser. Thus, instead of referencing your image in the HTML tag, you will reference a php file and pass your image as a parameter.

If you want to pass parameters in to a php script, there are three ways: get, post, and cookies. Setting a cookie doesn't make much sense in this context and you can't use post in a url, so let's go with get. In php, get values are stored in a special global variable called $_GET, and are referenced using array notation ($_GET['myunnecessarilylongparametername'] will, for example, get the value of myunnecessarilylongparametername, which was passed in via the url). So let's go ahead and create a skeleton php file that will take the necessary parameters and process them:


        $img = $_GET['img'];
        $mult = $_GET['scale'];
 
        if($img[0]!='/'){
                $img = "/$img";
        }
        $fname = $_SERVER['DOCUMENT_ROOT']. $img;
        if(file_exists($fname)){
        $pi = pathinfo($fname);
        $ext = $pi['extension'];
                getImage($mult, $fname, $ext);
        }
?>

"But wait a minute!" you cry. "There are only two parameters! Don't we need three?" Well, maybe.

The first parameter, img, is of course the image file. The second parameter, which I have confusingly named scale in the url but mult in the code, is not so obvious. I call it the scaling coefficient, because I like to sound smart, but really it's just a number that you multiply the width and height by to get the new width and height.

I personally like this method a lot. If you have a lot of images that are different sizes, this will maintain the native aspect ratio for each image while still scaling each one down. It can be a problem if your images are of significantly differing sizes, however; if you want, you can replace the single parameter scale with two parameters that explicitly specify the width and height. I won't mind.

Unfortunately, several of the functions we must call--starting with file_exists--do not accept relative web paths. This is what the %_SERVER reference is for. This still feels a little like a kludge, but at least it's better than hard-coding the path in. If anyone has a suggestion on how to do it better, post in the forums and I'll be glad to hear you out! Note that this will work on Windows as well as UNIX-like systems, but that we need to prepend a slash if one does not already exist.

Once we have resolved those crises, the next big question in your mind is undoubtedly the getImage function: what is it? You may have even searched through the php manual looking for it (if so then sorry, since it's not there). The answer, of course, is that I am going to tell you how to write that function yourself. Be excited!

<< Previous

Next >>