Display of GIF images in GDI +

1. Introduction to GIF format

1. Overview

GIF (Graphic Interchange Format) is a graphic file format developed by CompuServe. It is copyrighted and must be authorized by CompuServe for any commercial purposes.
GIF images are based on the color list (the data stored is the color of the point corresponding to the index value of the color list). A maximum of 8 bits (256 colors) are supported ). GIF files are divided into multiple storage blocks to store multiple images or control blocks that determine the behavior of images. These are used for animation and interactive applications. GIF files are also compressed by LZWAlgorithmCompress image data to reduce image size.

2. GIF File Storage Structure

GIF files are divided by block, including control block and data sub-blocks. A control block controls the behavior of data blocks. Different control blocks contain some different control parameters. Data blocks only contain 8-bit batch streams, the previous control block determines its function. The size of each data block ranges from 0 to 255 bytes. the first byte of the data block indicates the size of the data block (the number of bytes ), the size of the calculated data block does not include this byte. Therefore, an empty data block contains one byte, that is, the size of the data block is 0x00. The following table shows the structure of a data block:

Byte 7 6 5 4 3 2 1 0 bit
0 block size
Block Size-the block size, excluding this byte (the block size itself is not calculated)
1 Data Values-block data, 8-Bit String
2
...
254
255

The structure of a GIF file can be divided into three parts: File Header, GIF data stream, and trailer. The file header contains the GIF file signature and version. The GIF data stream consists of the control identifier, image block, and other extension blocks; the file Terminator has only one character ('';'') with a value of 0x3b, indicating the end of the file. The following table shows the structure of a GIF file:

GIF Signature File Header
Version Number
Logical screen identifier GIF data stream
Global color list
...
Image identifier image block
Image local color list
Color list-based image data

...
End of GIF ending File

The following describes the specific parts:

Header)

GIF signature and version)

The GIF signature is used to determine whether a file is in GIF format. This part consists of three characters: "GIF"; the file version number is also composed of three bytes, it can be "87a" or "89a ". the specific descriptions are as follows:

Byte 7 6 5 4 3 2 1 0 bit
1 ''g'' GIF File ID
2''
3 ''f''
4. '8' GIF file version: 87a-August 15, May 1987
89a-September
5 ''7'' or ''9''
6 ''a''

GIF data stream)

Logical screen identifier (logical screen descriptor)

This part consists of 7 bytes and defines the size of the GIF image (logical screen width & height), color depth (color bits), and background color (blackground color index) and whether the global color table and the index count of the color list are available. For details, see the following table:

Byte 7 6 5 4 3 2 1 0 bit
1. The number of logical screen widths, which defines the width of the GIF image.
2
3. Logic screen height: number of pixels, which defines the height of GIF images.
4
For details about 5 M cr S pixel, refer to the following description...
6. Background color (the index in the global color list. If there is no global color list, this value is meaningless)
7-pixel aspect ratio pixel aspect radio)

The global color table flag (m-global color table flag) indicates a global color list. The pixel value is meaningful.
Cr-color resolution and Cr + 1 determine the color depth of the image.
Sort flag.
Pixel-the size of the global color list. pixel + 1 determines the number of color list indexes (pixel 2 + 1 power ).

Global color table)

The global color list must be followed by the logical screen identifier. Each color List Index Entry consists of three bytes, which are arranged in the order of R, G, and B.

Byte 7 6 5 4 3 2 1 0 bit
1 Index 1's red value
2. Green value of Index 1
3. The blue value of Index 1
4. The red value of index 2
5. Green value of index 2
6. The blue value of index 2
7...

Image Descriptor)
~~~~~~~~~~~~~~~~~~~~~~~~~
A GIF file can contain multiple images. After an image ends, it is followed by an image identifier. The image identifier starts with 0x2c, defines the nature of the following image, including the offset of the image relative to the logical screen boundary, the image size, and the presence or absence of a local color list and color list size, consisting of 10 bytes:

Byte 7 6 5 4 3 2 1 0 bit
1 0 0 1 0 1 1 0 0 image identifier, fixed value '',''
2. The offset in the X direction must be within the logical screen size range.
3
4 Y direction offset
5
6. Image Width
7
8. Image Height
9
10 m I s r pixel M-local color table flag)
When the position is set, the identifier is followed by a local color list next to the image identifier for an image that follows it. If the value is not set, the global color list is used to ignore the pixel value.
I-interlace flag (interlace flag). The image data is arranged in the way of interlace (detailed description...) when the position is set. Otherwise, the image data is arranged in sequence.
Sort flag.
R-retained. It must be initialized to 0.
The size of the local color table (pixel + 1) indicates the number of digits in the color list.

Local color table)

If the above part color list flag is set to a bit, you need to define a local color list here (after the image identifier) for its image to use, note that the original color list should be saved before use, and the original global color list should be restored after use. If a GIF file does not provide a global color list or a local color list, you can create a color list by yourself or use the system color list. The local color list is arranged in the same way as the global color list: rgbrgb ......

Table-based image data)

It consists of LZW encoding length (LZW minimum code size) and image data ).

Byte 7 6 5 4 3 2 1 0 bit
1 LZW encoding length the number of digits in the initial code table of LZW encoding. For details, see LZW encoding...



...
Image Data, composed of one or more data blocks (Data sub-blocks)

Data Block

...

GIF image data uses the LZW compression algorithm (for details, see the "LZW algorithm and GIF data compression"), which greatly reduces the size of image data. Image Data is arranged in two ways before compression: continuous and intertwined (controlled by the intertwined sign of the image identifier ). The Raster Data of the image is arranged consecutively from left to right and from top to bottom. The raster data is processed by means of the following method:

Create four channels (PASS) to save data. Each channel extracts data from different rows:
The first channel (pass 1) extracts data from every eight rows starting from 0th rows;
The second channel (pass 2) extracts data from every eight rows starting from 4th rows;
The third channel (pass 3) extracts data from every four rows starting from 2nd rows;
The fourth channel (pass 4) extracts data from 1st rows at intervals of 2 rows;

The following example demonstrates the sequence of extracting intertwined image data:

Line Channel 1 channel 2 channel 3 Channel 4
0 ---------------------------------------------------------- 1
1 ---------------------------------------------------------- 4
2 -------------------------------------------------------- 3
3 ---------------------------------------------------------- 4
4 -------------------------------------------------------- 2
5 ---------------------------------------------------------- 4
6 -------------------------------------------------------- 3
7 ---------------------------------------------------------- 4
8 ---------------------------------------------------------- 1
9 ---------------------------------------------------------- 4
10 ---------------------------------------------------------- 3
11 ---------------------------------------------------------- 4
12 -------------------------------------------------------- 2
13 ---------------------------------------------------------- 4
14 -------------------------------------------------------- 3
15 ---------------------------------------------------------- 4
16 ---------------------------------------------------------- 1
17 ---------------------------------------------------------- 4
18 -------------------------------------------------------- 3
19 ---------------------------------------------------------- 4
20 -------------------------------------------------------- 2

Graphic Control Extension)

This part is optional (version 89a is required) and can be placed before an image block (image identifier) or text extension block to control the first image (or text) following it) rendering (render) form, the composition structure is as follows:

byte 7 6 5 4 3 2 1 0 bit
1 extension block ID extension Introducer-ID this is an extension block, fixed value 0x21
2 Graphic Control extension label Graphic Control label-identify this is a graphic control extension block, fixed value 0xf9
3 block size-block Terminator not included, fixed value 4
4 retention disposal method I
T
I-user input logo; t-transparent logo. For detailed descriptions, see...
5 Delay Time: Delay Time-unit: 1/100 seconds. If the value is not 1, indicates to suspend the specified time and continue to process the data stream
6
7 transparent color index-transparent color index value
8 Terminator blocks Terminator-identify block termination, fixed value 0

disposal method (disposal method): indicates the method for disposal of images. The value is:
0-no disposal method
1-no disposal of images, move the image from the current position
2-back to the background color
3-back to the previous status
4-7-custom
User input flag (Use input flag): indicates whether or not the user is expected to continue with the input. If it is set to a bit, the user is expected. If it is set to a value, the user is not expected. You can press the Enter key and click the mouse to use it together with the delay time. If you have input within the set delay time, continue immediately, or do not enter until the delay time reaches
transparent color flag: Set to use transparent color

Comment Extension)

This part is optional (version 89a is required) and can be used to record any non-graphic and controlled plain text data (7-bit ASCII characters) such as graphics, copyrights, and descriptions ), annotation extension does not affect the processing of image data streams. decoder can ignore it completely. The storage location can be any part of the data stream. It is recommended that you do not restrict control and data blocks. Specific components:

Byte 7 6 5 4 3 2 1 0 bit
1 extension block ID extension Introducer-ID this is an extension block with a fixed value of 0x21
2. Comment label-this is a comment block with a fixed value of 0xfe.

...
Comment data-composed of one or more data blocks (Data sub-blocks)

Comment Block

...

Block Terminator-end of the comment block, fixed value 0

Graphic text extension (plain text extension)

This part is optional (version 89a is required), used to draw a simple text image, this part is used to draw plain text data (7-bit ASCII characters) and control the drawing parameters. Draw text defines boundaries by means of a text grid. Multiple cells are divided in the text box, each character occupies one unit, draw from left to right, from top to bottom, until the last character or full text box (subsequent characters will be ignored, therefore, when defining the text box size, you should note whether it can accommodate the entire text.) The color index of the drawn text uses the Global color list. If not, you can use a previously saved color list. In addition, the graphic text extension block is also a graphic rendering block. You can define the graphic control extension before it to further modify its representation. Composition of graphic text extensions:

Byte 7 6 5 4 3 2 1 0 bit
1 extension block ID extension Introducer-ID this is an extension block with a fixed value of 0x21
2. Graphic Control extension label plain text label-this is a graphic text extension block with a fixed value of 0x01.
3 block size-block size, fixed value 12
4. The left boundary position of the text box is the text GLID left posotion-pixel value. The distance between the text box and the left boundary of the logic Screen
5
6. Text GLID top posotion-pixel value at the upper boundary position of the text box. The distance between the text box and the upper boundary of the logic Screen
7
8 text box height text GLID width-pixel value
9
10 text box height text GLID height-pixel value
11
12-character cell width-pixel value, single cell width
13-character cell height-pixel value, height of a single cell
14 text foreground color index-index of foreground color in the global color list
15 text background color index text blackground color index-Index of background color in global color list
N
...
Plain text data-one or more data blocks (Data sub-blocks) are saved in the displayed string.

Text data block

...

N + 1 ending block Terminator-mark the end of the comment block. The fixed value is 0.

Recommendation: 1. Because the font and size of the text are not defined, the decoder should select the most appropriate one based on the situation;
2. If the value of a character is less than 0x20 or greater than 0xf7, it is recommended to be displayed as a space (0x20 );
3. For compatibility, it is best to define the size of the character cell as 8x8 or 8x16 (width x height ).

ApplicationProgramApplication Extension)

This is provided for the application itself (version 89a is required). The application can define its own identity and information here to form:

Byte 7 6 5 4 3 2 1 0 bit
1 extension block ID extension Introducer-ID this is an extension block with a fixed value of 0x21
2 Graphic Control extension label application extension label-identify this is an application extension block, fixed value 0xff
3 block size-block size, fixed value 11
4 Application Identifier-used to identify the application itself (8 consecutive ASCII characters)
5
6
7
8
9
10
11
12 Application Authentication Code Application Authentication code-Special Identification Code defined by the application (3 consecutive ASCII characters)
13
14
N
...
A custom data block of an application-data sub-blocks

Application Data

...

N + 1 Terminator lock Terminator-Mark end of comment block, fixed value 0

End of File

File terminator (trailer)

This part only contains one byte with a value of 0, marking the end of a GIF file.

Byte 7 6 5 4 3 2 1 0
1. File termination
GIF trailer-indicates the end of The GIF file. The fixed value is 0x3b.

2. Draw GIF in GDI +

The Code As follows:
Void cmywnd: onpaint ()
{
Cpaintdc DC (this );
Graphics graphics (& DC); // create a GDI + graphics object

Image image (L "test. GIF"); // construct an image
Graphics. drawimage (& image, 0, 0, image. getwidth (), image. getheight ());
}

GIF can be divided into two types. One is static. For GIF in this format, it can be directly displayed in GDI + without any method (this is the case with the above Code ). The other is dynamic, which can display simple animations. Dynamic is actually composed of multiple static images. When a GIF is displayed, each image is displayed in sequence at a certain interval to achieve the animation effect.
I encapsulated GIF into an imageex class, which inherits the image class in GDI +. The first thing we need to do is determine whether the GIF is dynamic or static.
Bool imageex: testforanimatedgif ()
{
Uint COUNT = 0;
Count = getframedimensionscount ();
Guid * pdimensionids = new guid [count];

// Obtain the Object List of the sub-Frame
Getframedimensionslist (pdimensionids, count );

// Obtain the total number of frames
M_nframecount = getframecount (& pdimensionids [0]);

// Assume that the image has an attribute entry propertyitemequipmake.
// Obtain the size of this entry.
Int nsize = getpropertyitemsize (propertytagframedelay );

// Allocate space for Attribute entries.
M_ppropertyitem = (propertyitem *) malloc (nsize );
Getpropertyitem (propertytagframedelay, nsize, m_ppropertyitem );
Delete pdimensionids;
Return m_nframecount> 1;

}
M_ppropertyitem-> value is a long integer array. Each long integer represents the delay of each frame. Because different properties are obtained, getpropertyitem will get objects of different sizes. Therefore, the size of the objects to be obtained by the user will open up memory related to the deletion of getpropertyitem. The object size is obtained through getpropertyitemsize, and its parameters are the attribute entries you are interested in. Once the number and latency of frames are obtained, a thread can be generated to call drawframegif () for display.
Bool imageex: drawframegif ()
{
: Waitforsingleobject (m_hpause, infinite );
Guid pageguid = framedimensiontime;
Long hmwidth = getwidth ();
Long hmheight = getheight ();
HDC = getdc (m_hwnd );
If (HDC)
{
Graphics graphics (HDC );
Graphics. drawimage (this, m_rc.left, m_rc.top, hmwidth, hmheight );
Releasedc (m_hwnd, HDC );
}
Selectactiveframe (& pageguid, m_nframeposition ++ );
If (m_nframeposition = m_nframecount)
M_nframeposition = 0;

Long lpause = (long *) m_ppropertyitem-> value) [m_nframeposition] * 10;
DWORD dwerr = waitforsingleobject (m_hexitevent, lpause );
Return dwerr = wait_object_0;
}

In C #, draw a GIF image with a transparent background.

Protected override void onpaint (painteventargs E)
{
// Base. onpaint (E );
Bitmap IMG = new Bitmap (@ "C: \ 123.gif ");
System. Drawing. imaging. propertyitem item = IMG. propertyitems [0];
// IMG. maketransparent (color. Red );
Guid = (guid) IMG. framedimensionslist. getvalue (0 );
Int COUNT = IMG. getframecount (new system. Drawing. imaging. framedimension (guid ));
// IMG. size;
System. Drawing. imaging. framedimension = new system. Drawing. imaging. framedimension (guid );
For (INT I = 0; I <count; I ++)
{
// Select a region
Int selectresult = IMG. selectactiveframe (framedimension, I );
If (selectresult = 0)
{
// IMG. maketransparent (color. fromargb (255,255,255 ));
Bitmap dd = system. Drawing. image. fromhbitmap (IMG. gethbitmap ());
Dd. maketransparent (); // make the image background transparent
E. Graphics. drawimage (DD, new rectangle (10, 10, 20, 50 ));

System. Threading. thread. Sleep (item. value [0 * item. Type] * 10 );
}
If (I = count-1)
I = 0;
}
}