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 http://www.perl.com/perl/, 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. GD.pm 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 (http://www.boutell.com/gd/). You can get GD.pm at http://www-genome.wi.mit.edu/ftp/pub/software/WWW/GD.html 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 http://www.apache.org/ for free. There are other freeware and commercial web servers, but Apache gets my vote for best web server on a Unix platform.

  4. cgi-lib.pl 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. cgi-lib.pl can be downloaded from http://www.bio.cam.ac.uk/cgi-lib/ for free. Similar packages are available, but cgi-lib.pl is my personal preference.

Example #1

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

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 cgi-lib.pl 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 http://bodock.vislab.olemiss.edu/cgi-bin/example1.cgi.

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:

<IMG SRC=
"http://bodock.vislab.olemiss.edu/cgi-bin/example1.cgi"
ALT="">

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"
alt="">
Notice I took off the full URL. Doing this assumes that the CGI script is on the same machine as the web page.

______________________

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState