GIF Images on the Fly

This article gives us a quick lesson in creating new images from old.

One of the best kept secrets on the World Wide Web is how GIF images are created in real time or “on the fly”. Some of the reasons for creating GIF images on the fly include highlighting a map image, combining several images into one (similar to the layers feature in CAD packages) and even making virtual postcards.

My reason for developing programs to create GIF images on the fly was for a campus map that would highlight important locations. That is, when anyone visited our campus map web page and selected a certain building or site to locate, we wanted to highlight that particular site in some way.

As with most projects, all of the details had not been worked out in advance, so I chose a development route that would save me time—I decided to write a program to automate the task. Programming is more fun for me than editing 100 or more images, especially when people tend to change their minds. It turns out that the development time was not dramatic, and when modifications were requested, it was a trivial task.

In this article, I simplify my project and outline the steps to create a new GIF image by adding an arrow to an existing image. You need to be familiar with CGI programming in Perl as well as HTML. You do not have to be an expert.

Getting Started

First, download and install the items listed below.

  1. Perl: This is the programming language we will use. For CGI programs, I typically start out with a Perl program and then migrate to C if the speed of the program becomes the bottleneck. You will need at least version 5.002 of Perl. Download it from, if you do not already have it installed. There should also be pointers to the Windows 95/NT version of Perl at the URL above. As far as I know, all Perl implementations are free.

  2. interface: This interface provides the graphics commands to do the GIF image manipulation. It was developed by Lincoln Stein and is based on the gd C library developed by Thomas Boutell ( You can get at for free.

  3. Web server: This example was developed on the Apache 1.2 web server. However, as long as the web server allows you to write CGI scripts in Perl, and Perl is installed as a CGI language, it should work. You can get Apache at for free. There are other freeware and commercial web servers, but Apache gets my vote for best web server on a Unix platform.

  4. library (optional): This is a set of Perl routines for reading input from a form. If you plan on accepting input from a web form to generate the GIF image, you need this or a similar package. can be downloaded from for free. Similar packages are available, but is my personal preference.

Example #1

Once you have all the packages installed, you are ready to create your first CGI script that uses

In the first example, we read in two GIF images: a main image and an arrow image. Based on input from the user, we “place” the arrow on the main image. Last, we display the final image. Listing 1 shows the source code for this example.

Line 2 requests the use of the GD interface and Line 3 verifies that we are using Perl 5.002 or higher. Line 5 includes the routines from for reading form input. One of those routines, ReadParse, is used in Line 6 to get the form input data. The data from this form is stored in the associative array named FORM.

Next, Lines 8-11 set up variables which include the filenames for the main and arrow images. In addition, the variables for placement of the arrow on the main image are assigned default values, if they are not provided from a web form or other technique. I will show an example of passing variables to a script later.

Lines 13-15 and 17-19 do the same thing. The first set reads the main image into a variable called $main. The second set reads the arrow image and stores the image in the variable $arrow. In each set, you will notice a routine newFromGif GD::Image(GIF). This is the GD function that reads an image from the file and stores it into a variable. The nice thing about this routine is that it does not require image dimensions, although you probably want to know them.

Line 21 does most of the work in the script. It takes the arrow image and stores it at the x-pixel position $FORM{xp} and the y-pixel position $FORM{yp} on the main image. The last four parameters for the function define how much of the arrow image is copied. In our case, all of the arrow image was copied onto the main image.

Finally, Lines 23 and 24 output the image as if it were being called from an HTML file and Line 25 ends the script.

Now, we need to call the script to generate the image. You can do this in a couple of ways. First, just call the CGI script directly from a web browser like Netscape. An example URL would be

Calling the script would simply display the image on the screen. You can also put this URL in an IMG tag of an HTML file like the following:


Last, you can modify the URL slightly to specify an x,y position for the arrow image. An example URL within an IMG tag would be as follows:

<IMG SRC="/cgi-bin/example1.cgi?xp=10&yp=40"
Notice I took off the full URL. Doing this assumes that the CGI script is on the same machine as the web page.