Chapter 9: GIF Output

Introduced by CompuServe in 1987, Graphics Interchange Format (GIF, pronounced Jiff) is widely used on the Web for sharp-edged images with a limited number of colors, such as navigation buttons, logos, graphs, charts and icons. GIF is based on LZW, a lossless compression algorithm ideally suited for simple graphics (but not photographs.)

A GIF image can contain up to 256 distinct colors from the 24-bit color set. Pixel colors in a GIF image are numbers between 0 and 255 which are indices to a color palette included with the image.

Any pixel of a GIF image can be assigned a "transparent", or see-through, color. This enables GIF images to take arbitrary shapes when appearing on a web page.

GIF is the only widely used graphics format that supports animation. A GIF image can contain multiple frames that are displayed one after another as a movie. To reduce overall image size, some frames are often made smaller than the image itself, and are displayed at an offset to only affect those portions of the image that need redrawing.

Starting with version 2.0, AspJpeg includes a new object, appropriated called Gif, which provides a wide range of operations on GIF images. An instance of this object is obtained via the Jpeg.Gif property. The Gif object is completely autonomous, i.e. it is not affected by AspJpeg's other properties and methods.

A simple GIF image is created by calling the Gif.AddFrame method followed by some drawing routines, and saved via the Save method. Other saving routines available in the ASPJpeg object (SaveUnique, SendBinary and Binary) are supported by the Gif object as well. AddFrame requires 4 arguments: frame width and height, and horizontal and vertical offsets. For a single-frame image, the offset arguments are usually 0.

Most properties and methods of the Gif object operate on the current frame. Once a new frame is added, it becomes the current one. Another frame can be set current by setting the Gif.CurrentFrame property to the 1-based index of the desired frame. The total number of frames is returned via Gif.FrameCount. A frame can be removed via Gif.RemoveFrame.

The Gif object supports most of the drawing routines the Canvas object supports, such as PrintText, DrawLine, etc. Setting various drawing properties is somewhat streamlined compared to the Canvas object. For example, an equivalent of Jpeg.Canvas.Pen.Color is simply Gif.PenColor. Colors in the Gif object are always numbers in the range 0 to 255 which are indices within the current palette. Palette management is described in Section 9.5 below.

The following code sample creates a simple animated 5-frame drawing with some text and a pie chart:

Click the links below to run this code sample:

http://localhost/aspjpeg/manual_09/09_animation.asp http://localhost/aspjpeg/manual_09/09_animation.aspx

The Gif object is capable of resizing animated GIF images while preserving their animation and transparency. Resizing is performed via the Gif.Resize image which accepts three optional arguments: new width, new height and a resizing algorithm. You must specify either a new width, new height or both. If only one dimension is specified, the other will be calculated automatically to preserve the original aspect ratio. The resizing algorithm is 0 (nearest-neighbor) by default. More information about the resizing algorithms supported by AspJpeg is available here.

Original Image

Resized Image

The resized image above on the right was generated using the following code:

Click the links below to run this code sample:

http://localhost/aspjpeg/manual_09/09_resize.asp http://localhost/aspjpeg/manual_09/09_resize.aspx

Note that the file size of a resized animated image may be larger that the original image even though the pixel size is smaller (as in this example.) Also note that the 3rd argument to the Resize method (resizing algorithm) can be set to 1 to create higher-quality thumbnails, but some animated images may produce undesired "artifacts" in that case.

The Gif object is capable of converting RGB images such as JPEGs into 256-colors GIFs with only a minor loss in image quality. An arbitrary existing image can be added to a GIF as a new frame via the Gif.AddImage method. This method expects a populated instance of the ASPJpeg object as the first argument, and (X, Y)-offsets of this new frame within the GIF image being created. You must perform all desired operations over the ASPJpeg object (resizing, cropping, drawing, etc.) before passing it to the AddImage method. The image being added must be in the RGB color space.

The following snippet resizes a JPEG image and converts it to a single-frame GIF:

Because of the loss of quality and larger file size, converting a JPEG photograph to GIF is not beneficial, unless other GIF features are used, such as animation.

The code sample of Section 6.1 generates an image containing the thumbnails of several photographs shown side by side. Let's rewrite this application to generate an animated GIF showing the thumbnails in rotation instead:

Click the links below to run this code sample:

http://localhost/aspjpeg/manual_09/09_rotation.asp http://localhost/aspjpeg/manual_09/09_rotation.aspx

Note that the overall GIF image size is dictated by the size of the first frame added, unless we explicitly specify it via Gif.Width and Gif.Height properties. In this application, we want the image to always be 100 x 100 regardless of the size and orientation of the thumbnails being added. Therefore, we have to explicitly specify the image size.

Note also that we set the DisposalMethod for each frame to 2, which means the canvas should be restored to the background color before the next frame is drawn. This property is 1 by default which means the previous frame needs to be left in place and the next frame is to be drawn on top of it. In our application, the default behavior is undesirable since all thumbnails are different sizes.

Converting true-color to 256-color images is a fairly complex process usually referred to as quantization. The speed and quality of the conversion is controlled by the property Gif.Quantization. Valid values for this property are 1 to 30, 1 being highest quality and slowest speed. The default value of 20 provides a reasonably good trade-off between quality and speed.

9.5.1 GIF Palette Overview

GIF is an indexed color format. Each pixel color is specified via an index pointing to an RGB entry in a palette. Each GIF image contains at least one palette. Usually, there is a single global palette which applies to each frame of the image. In some cases, a frame has its own local palette which takes precedence over the global palette within that frame but does not apply to any other frames. If each frame has its own local palette, a global palette is usually not present at all.

GIF format requires that a palette contain 2, 4, 8, 16, 32, 64, 128, or 256 colors. Each color entry in a palette contains exactly three bytes: the R, G, and B values.

9.5.2 Accessing and Modifying Palettes

The Gif object offers a number of properties and methods to access and modify the global and local palettes of an image.

To specify an entire palette (global or local) in a single step, the SetPalette method should be used. This method expects a Boolean flag indicating whether the palette is global (True) or local (False), and a Variant-packed array of numbers specifying the RGB values of the entire palette. The array must contain a valid number of colors (2, 4, 8, etc.) multiplied by 3. If the first argument is False (indicating a local palette) the image must already contain at least one frame, and the palette pertaining to the current frame will be affected.

The following code snippet sets the global palette to contain 4 colors: black (0, 0, 0), white (255, 255, 255), green (0, 255, 0) and yellow (255, 255, 0):

To set or obtain the size of a palette, use the property PaletteSize which expects the same global/local flag as the SetPalette method. The size of a palette is the number of colors, not the total number of color components. Valid values are 2, 4, 8, ..., 256. Setting this property to 0 effectively removes the palette entirely. Examples of using this parameterized property are as follows:

To set or get an individual color component of a palette, use the property PaletteItem which expects two parameters: the global/local flag and the address (0-based index) of the desired color component within the palette. The three RGB components of the 1st color have the addresses 0, 1 and 2, the 2nd color -- 3, 4, and 5, etc. The address parameter must be in the range [0, PaletteSize * 3 - 1].

9.5.3 Stock Palettes

The Gif object enables you to specify one of several built-in palettes via the SetStockPalette method. This method expects two arguments: the global/local flag, and the palette number. Currently, 3 stock palettes are available:

Palette #1: Web-safe colors (default palette, 216 actual colors, 40 reserved slots);
Palette #2: Standard HTML colors (16 colors);
Palette #3: Grayscale colors (256 colors).

Palette #1 is the default global palette in all new images created with the Gif object. This palette contains the standard Web-safe colors as described in the HTML specifications. There are 216 standard Web-safe colors, and the indices 216 to 255 are not used and set to black. These unused slots can be set to any arbitrary colors, if necessary.

The standard Web-safe color palette looks as follows:

To obtain the index for a given color, add the numbers in the leftmost column and top row corresponding to this color.

Palette #2 contains the standard 16 HTML colors (alphabetically ordered by name), as follows:

Palette #3 contains 256 grayscale colors from RGB(0, 0, 0) to RGB(255, 255, 255) and is not shown here.

Any single color index in a frame can be assigned to be transparent, or see-through. This is done via the property Gif.TranspColor. The following code snippet creates a new GIF image and assigns color index 216 (the first unused index in the default palette) to be transparent, and then fills the image with a transparent background:

To remove transparency from the current frame, the property Gif.TranspColorSet needs to be set to False.

9.7.1 Other Frame Management Methods

In addition to the Gif.AddFrame and Gif.RemoveFrame methods covered above, there are also Gif.Clear and Gif.MoveFrame methods.

The Clear method, which takes no arguments, simply removes all frames from the image. An image with no frames cannot be saved or drawn on.

MoveFrame takes two arguments: the original index and desired index. It moves the frame specified by the first argument to a new location specified by the 2nd argument. If the current frame is affected by the move, the CurrentFrame property will change to reflect the new position of the current frame. The current frame remains the same, albeit at a new location.

9.7.2 Other Animation Management Properties

The Gif.Loops property controls how many times the animation sequence runs before stopping. By default, this property is 0 which designates an infinite number of loops.

The Gif.Delay property affects the time delay of the current frame measured in 1/100 sec. By default, this property is set to 100 (1 sec) for every frame being added.

9.7.3 Saving Individual Frames

The property Gif.FrameToSave, if set to a non-zero value, instructs the Gif object to save only the frame specified by this property, and no other frames, when a Save method is called. This enables you to view every individual frame of an animated GIF. This feature was added mostly for debugging purposes.

9.7.4 Finding a Closest Color

The method Gif.FindClosestColor enables you to search a palette for the index of a color closest to a given RGB trio. The method expects the global/local flag and three RGB values. It returns an index in the specified palette which corresponds to the color closest to the specified RGB values.

9.7.5 Disposal Methods

The property Gif.DisposalMethod controls how frames in an animated GIF replace each other. The valid values are:

1. Leave the current image in place and draw the next image on top of it. This is the default method.
2. The canvas should be restored to the background color before the next image is rendered.
3. The canvas should be restored to its previous state before the current image is drawn.