VC显示GIF图片

如果是使用VB，也许这个话题是多余的，因为VB有一个图象控件可以非常容易地实现各种格式的图象显示功能，然而对于VC却没有一个象样的控件可以达到这种效果，怎么办？经过一段日子的研究，发现只需要实现两步工作，就可以在VC中实现如同VB中一样的gif动态效果。

本文将介绍的两部分是IPicture接口的使用和gif的储存格式，好象一听到储存格式，读者就不想再看下去了！其实不然，这里只须用到其最基本的一部分，请读者耐心地往下看。

一．IPicture接口

IPicture接口是一个com类，其成员函数可参见微软的MSDN，这里只需用到以下几个函数：

get_Width
返回当前图像的宽度

get_Height
返回当前图像的高度

Render
在指定的位置、设备上下文上绘制指定的图像

IPicture的使用不需要CoCreateInstance函数，而只需要使用OleLoadPicture,鉴于此接口在许多文章杂志上均有介绍，这里略去（因为不是本文的重点）。

二．Gif储存格式

gif储存格式是一个非常复杂的内容，如果要讲透彻可以写很多篇文章，庆幸的是要实现本文的主题只需要知道其中的一个图象储存结构就可以了，这里定义该图象结构为gifImage：

typedef struct gifImage{

   WORD logX;

   WORD logY;

   WORD width;

   WORD height;

   struct flag{

          BYTE d:3;

          BYTE c:1;

          BYTE b:3;

      BYTE a:1;

   }Flag;

}GifImage,*PGifImage;

在该结构中,

logX为图象相对于逻辑屏幕左上角的x坐标，常为0；

logY为图象相对于逻辑屏幕左上角的y坐标，常为0；

width为图象的宽度；

height为图象的高度；

Flag为一个标志，a指是否存在局域性调色板，b为存储方式（与本主题无关），c为RGB值是否经过排序（无关），d为调色板的大小，为3*2^(d+1);

最后想提一下，因为每副图象都以0x2c开头，并且0x2c前面必为0，故在储存格式中要找到图象的起始位置，只需查找0x2c并且前面一个值为0（具体请看下面代码），其次，一副图象可能储存为多个数据块，每个数据快都是以数据长度为起始的，这一点很重要。即其图象储存为：

0x2c
图象开头

gifImage
图象头结构

BYTE Number
Number为一个跟gif压缩有关的数字，可以不理踩。

第一副图象的大小


......
图象存储内容

第二副图象大小


......


......


......


0x00
数据块结束

好，介绍完了主要的两大部分也该进入今天的主题了。由于使用IPicture接口可以非常轻松地显示gif的第一副图画，那么我们就是利用这一点，利用gif的图象格式，把第二，三。。。图画逐一拷贝到第一副图画的位置，再使用IPicture进行读取，便可以形成一副十分连续的gif动画了，接下来就让我来给大家展示以下：

HINSTANCE handle = ::AfxGetResourceHandle

 

HRSRC hrsrc= ::FindResource(handle,MAKEINTRESOURCE(IDR_IMAGE2)，"IMAGE");

DWORD word = ::SizeofResource(handle,hrsrc);

BYTE* lpBy = (BYTE*)LoadResource(handle,hrsrc);//获得图象的首地址

BYTE* pByte[20];                //用来储存gif每幅图象的地址

DWORD nu[20];                   //用来储存每幅图象的大小

int num = 0;                    //用来计算有几副图象

DWORD firstLocation = 0;        //第一副图象的位置，用来替换

for(DWORD j=0;j<word;j++)

{

        if(lpBy[j]==0x2c) //图象开头

        {

               if(lpBy[j-1]==0x00)             //确认是否图象开头

               {

                       if(num==0)

                       {

                               firstLocation = j;     //得到第一副图象位置

                       }

                       PGifImage nowImage = (PGifImage)&lpBy[j+1];

                       if(nowImage->Flag.a==0)        //a为0时指图象不存在局部调色板

                        {

                               DWORD number = 1+sizeof(GifImage);

                               while(lpBy[j+number]!=0)

                               {

                                   number = number+(DWORD)lpBy[j+number]+1;

                               }                        //算得图象大小

                               number++;                //把最后一个0x00加上

                               pByte[num] = new BYTE[number];

                               for(DWORD n=0;n<number;n++)

                               {

                                      *(BYTE*)(pByte[num]+n) = lpBy[j+n];

                               }                        //将图象储存起来。

                               nu[num] = number;

                               j = j+number-1;            //跳过图象

                               num++;

                        }

                        else

                        { //当a为1时需要加上局部调色板的大小，其他与a为0时一样

                               int number = 1+sizeof(GifImage)+3*(int)floor(pow(2,nowImage->Flag.d));

                               while(lpBy[j+number]!=0)

                               {

                                   number = number+(DWORD)lpBy[j+number]+1;

                               }                        //算得图象大小

                               number++;                //把最后一个0x00加上

                               pByte[num] = new BYTE[number];

                               for(DWORD n=0;n<number;n++)

                               {

                                      *(BYTE*)(pByte[num]+n) = lpBy[j+n];

                               }                        //将图象储存起来。

                               nu[num] = number;

                               j = j+number-1;            //跳过图象

                               num++;

                        }

                 }

          }

}

   int working= 1;

   while(working)

   {

          for(int m=0;m<num;m++)

          {

                 CBrush brush(RGB(255,255,255));

                 pdc->FillRect(CRect(0,0,500,500),&brush);

                 DWORD DDD;

                 VirtualProtect(lpBy,word,PAGE_READWRITE,&DDD);

               //修改页面的保护属性，以进行写操作

                 for(DWORD n=0;n<nu[m];n++)

                 {

                        lpBy[firstLocation+n] = *(BYTE*)(pByte[m]+n);

                 }

                 VirtualProtect(lpBy,word,DDD,NULL);

                 //因为IPicture必须把图象存成流的形式才能工作，所以有下面一段函数

                 CMemFile file(lpBy,word);

                 CArchive ar(&file,CArchive::load|CArchive::bNoFlushOnDelete);

                 CArchiveStream arcstream(&ar);

                 CComQIPtr<IPicture> m_picture;

                 HRESULT hr = OleLoadPicture((LPSTREAM)&arcstream,0,false,

                      IID_IPicture,(void**)&m_picture);

                 long a,b;

                 m_picture->get_Width(&a);

                 m_picture->get_Height(&b);

                 CSize sz(a,b);

                 pdc->HIMETRICtoDP(&sz);    //时OLE格式的大小转化为正常大小

                 CRect rect;

                 m_picture->Render(*pdc,0,0,sz.cx,sz.cy,0,b,a,-b,&rect);

                 Sleep(100);                  //停止一段时间。

          }

   }

 

GDI+中GIF图片的显示

一、GIF格式介绍

1.概述

　　GIF(Graphics Interchange Format，图形交换格式)文件是由 CompuServe公司开发的图形文件格式，版权所有，任何商业目的使用均须 CompuServe公司授权。
　　GIF图象是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持8位（256色）。GIF文件内部分成许多存储块， 用来存储多幅图象或者是决定图象表现行为的控制块， 用以实现动画和交互式应用。GIF文件还通过LZW压缩算法压缩图象数据来减少图象尺寸。

2.GIF文件存储结构

　　GIF文件内部是按块划分的，包括控制块（ Control Block ）和数据块（Data Sub-blocks）两种。控制块是控制数据块行为的，根据不同的控制块包含一些不同的控制参数； 数据块只包含一些8-bit的字符流，由它前面的控制块来决定它的功能，每个数据块大小从0到255个字节， 数据块的第一个字节指出这个数据块大小（字节数）， 计算数据块的大小时不包括这个字节，所以一个空的数据块有一个字节，那就是数据块的大小0x00。 下表是一个数据块的结构：

BYTE 7 6 5 4 3 2 1 0 BIT
0 块大小
Block Size - 块大小，不包括这个这个字节（不计算块大小自身）
1   Data Values - 块数据，8-bit的字符串
2  
...  
254  
255 

　　一个GIF文件的结构可分为文件头(File Header)、GIF数据流(GIF Data Stream)和文件终结器(Trailer)三个部分。文件头包含GIF文件署名(Signature)和版本号(Version)；GIF数据流由控制标识符、图象块(Image Block)和其他的一些扩展块组成；文件终结器只有一个值为0x3B的字符（'';''）表示文件结束。下表显示了一个GIF文件的组成结构：

GIF署名 文件头  
版本号
逻辑屏幕标识符 GIF数据流  
全局颜色列表  
...  
图象标识符 图象块 　　　　                  　　　　　　　
图象局部颜色列表图
　　                  　　　　　　　 基于颜色列表的图象数据  

...  
GIF结尾 文件结尾 

　　下面就具体介绍各个部分:

文件头部分(Header)

GIF署名(Signature)和版本号(Version)

GIF署名用来确认一个文件是否是GIF格式的文件，这一部分由三个字符组成："GIF";文件版本号也是由三个字节组成,可以为"87a"或"89a".具体描述见下表:

BYTE 7 6 5 4 3 2 1 0 BIT
1 ''G'' GIF文件标识
2 ''I''
3 ''F''
4 ''8'' GIF文件版本号：87a - 1987年5月
　　　　　　　 89a - 1989年7月
5 ''7''或''9''
6 ''a''

GIF数据流部分(GIF Data Stream)

逻辑屏幕标识符(Logical Screen Descriptor)

这一部分由7个字节组成，定义了GIF图象的大小(Logical Screen Width & Height)、颜色深度(Color Bits)、背景色(Blackground Color Index)以及有无全局颜色列表(Global Color Table)和颜色列表的索引数(Index Count)，具体描述见下表：

BYTE 7 6 5 4 3 2 1 0 BIT  
1 逻辑屏幕宽度 像素数，定义GIF图象的宽度
2
3 逻辑屏幕高度 像素数，定义GIF图象的高度
4
5 m cr s pixel 具体描述见下...
6 背景色 背景颜色(在全局颜色列表中的索引，如果没有全局颜色列表，该值没有意义)
7 像素宽高比 像素宽高比(Pixel Aspect Radio)

m - 全局颜色列表标志(Global Color Table Flag)，当置位时表示有全局颜色列表，pixel值有意义.
cr - 颜色深度(Color ResoluTion)，cr+1确定图象的颜色深度.
s - 分类标志(Sort Flag)，如果置位表示全局颜色列表分类排列.
pixel - 全局颜色列表大小，pixel+1确定颜色列表的索引数（2的pixel+1次方）.

全局颜色列表(Global Color Table)

全局颜色列表必须紧跟在逻辑屏幕标识符后面，每个颜色列表索引条目由三个字节组成，按R、G、B的顺序排列。

BYTE 7 6 5 4 3 2 1 0 BIT
1 索引1的红色值  
2 索引1的绿色值  
3 索引1的蓝色值  
4 索引2的红色值  
5 索引2的绿色值  
6 索引2的蓝色值  
7 ... 　　　                  　　　　　　　

图象标识符(Image Descriptor)
~~~~~~~~~~~~~~~~~~~~~~~~~
一个GIF文件内可以包含多幅图象，一幅图象结束之后紧接着下是一幅图象的标识符，图象标识符以0x2C('','')字符开始， 定义紧接着它的图象的性质，包括图象相对于逻辑屏幕边界的偏移量、图象大小以及有无局部颜色列表和颜色列表大小， 由10个字节组成：

BYTE 7 6 5 4 3 2 1 0 BIT  
1 0 0 1 0 1 1 0 0 图象标识符开始，固定值为'',''
2 X方向偏移量 必须限定在逻辑屏幕尺寸范围内
3
4 Y方向偏移量
5
6 图象宽度
7
8 图象高度
9
10 m i s r pixel m - 局部颜色列表标志(Local Color Table Flag)
              置位时标识紧接在图象标识符之后有一个局部颜色列表，供紧跟在它之后的一幅图象使用；值否时使用全局颜色列表， 忽略pixel值。
i - 交织标志(Interlace Flag)，置位时图象数据使用交织方式排列 （详细描述...），否则使用顺序排列。
s - 分类标志(Sort Flag)，如果置位表示紧跟着的局部颜色列表分类排列.
r - 保留，必须初始化为0.
pixel - 局部颜色列表大小(Size of Local Color Table)，pixel+1就为颜色列表的位数

局部颜色列表(Local Color Table)

如果上面的局部颜色列表标志置位的话，则需要在这里（紧跟在图象标识符之后）定义一个局部颜色列表以供紧接着它的图象使用，注 意使用前应线保存原来的颜色列表，使用结束之后回复原来保存的全局颜色列表。如果一个GIF文件即没有提供全局颜色列表，也没有提供局部颜色列表， 可以自己创建一个颜色列表，或使用系统的颜色列表。局部颜色列表的排列方式和全局颜色列表一样：RGBRGB......

基于颜色列表的图象数据(Table-Based Image Data)

由两部分组成：LZW编码长度(LZW Minimum Code Size)和图象数据(Image Data)。

BYTE 7 6 5 4 3 2 1 0 BIT
1 LZW编码长度 LZW编码初始码表大小的位数，详细描述见LZW编码...
　
　

...
图象数据，由一个或几个数据块(Data Sub-blocks)组成

数据块

...

 

GIF图象数据使用了LZW压缩算法（详细介绍请看后面的『LZW算法和GIF数据压缩』），大大减小了图象数据的大小。图象数据在压缩前有两种排列格式：连续的和交织的(由图象标识符的交织标志控制)。连续方式按从左到右、从上到下的顺序排列图象的光栅数据；交织图象按下面的方法处理光栅数据：

创建四个通道(pass)保存数据，每个通道提取不同行的数据：
第一通道(Pass 1)提取从第0行开始每隔8行的数据；
第二通道(Pass 2)提取从第4行开始每隔8行的数据；
第三通道(Pass 3)提取从第2行开始每隔4行的数据；
第四通道(Pass 4)提取从第1行开始每隔2行的数据；

下面的例子演示了提取交织图象数据的顺序：

行 　通道1　 　通道2　 　通道3　 　通道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)

这一部分是可选的（需要89a版本），可以放在一个图象块(图象标识符)或文本扩展块的前面， 用来控制跟在它后面的第一个图象（或文本）的渲染(Render)形式，组成结构如下：

BYTE 7 6 5 4 3 2 1 0 BIT
1 扩展块标识 Extension Introducer - 标识这是一个扩展块，固定值0x21
2 图形控制扩展标签 Graphic Control Label - 标识这是一个图形控制扩展块，固定值0xF9
3 块大小 Block Size - 不包括块终结器，固定值4
4 保留 处置方法 i
t
i - 用户输入标志；t - 透明色标志。详细描述见下...
5 延迟时间 Delay Time - 单位1/100秒，如果值不为1，表示暂停规定的时间后再继续往下处理数据流
6
7 透明色索引 Transparent Color Index - 透明色索引值
8 块终结器 Block Terminator - 标识块终结，固定值0

处置方法(Disposal Method)：指出处置图形的方法，当值为：
                        0 - 不使用处置方法
                        1 - 不处置图形，把图形从当前位置移去
                        2 - 回复到背景色
                        3 - 回复到先前状态
                      4-7 - 自定义
用户输入标志(Use Input Flag)：指出是否期待用户有输入之后才继续进行下去，置位表示期待，值否表示不期待。用户输入可以是按回车键、鼠标点击等， 可以和延迟时间一起使用，在设置的延迟时间内用户有输入则马上继续进行，或者没有输入直到延迟时间到达而继续
透明颜色标志(Transparent Color Flag)：置位表示使用透明颜色

注释扩展(Comment Extension)

这一部分是可选的（需要89a版本），可以用来记录图形、版权、描述等任何的非图形和控制的纯文本数据(7-bit ASCII字符)，注释扩展并不影响对图象数据流的处理，解码器完全可以忽略它。 存放位置可以是数据流的任何地方，最好不要妨碍控制和数据块，推荐放在数据流的开始或结尾。具体组成：

BYTE 7 6 5 4 3 2 1 0 BIT
1 扩展块标识 Extension Introducer - 标识这是一个扩展块，固定值0x21
2 注释块标签 Comment Label - 标识这是一个注释块，固定值0xFE

...
Comment Data - 一个或多个数据块(Data Sub-Blocks)组成

注释块

...

块终结器 Block Terminator - 标识注释块结束，固定值0

图形文本扩展(Plain Text Extension)

这一部分是可选的（需要89a版本），用来绘制一个简单的文本图象，这一部分由用来绘制的纯文本数据（7-bit ASCII字符）和控制绘制的参数等组成。绘制文本借助于一个文本框（Text Grid）来定义边界，在文本框中划分多个单元格，每个字符占用一个单元，绘制时按从左到右、从上到下的顺序依次进行， 直到最后一个字符或者占满整个文本框（之后的字符将被忽略，因此定义文本框的大小时应该注意到是否可以容纳整个文本）， 绘制文本的颜色索引使用全局颜色列表，没有则可以使用一个已经保存的前一个颜色列表。另外，图形文本扩展块也属于图形块(Graphic Rendering Block)，可以在它前面定义图形控制扩展对它的表现形式进一步修改。图形文本扩展的组成：

BYTE 7 6 5 4 3 2 1 0 BIT
1 扩展块标识 Extension Introducer - 标识这是一个扩展块，固定值0x21
2 图形控制扩展标签 Plain Text Label - 标识这是一个图形文本扩展块，固定值0x01
3 块大小 Block Size - 块大小，固定值12
4 文本框左边界位置 Text Glid Left Posotion - 像素值，文本框离逻辑屏幕的左边界距离
5
6 文本框上边界位置 Text Glid Top Posotion - 像素值，文本框离逻辑屏幕的上边界距离
7
8 文本框高度 Text Glid Width -像素值
9
10 文本框高度 Text Glid Height - 像素值
11
12 字符单元格宽度 Character Cell Width - 像素值，单个单元格宽度
13 字符单元格高度 Character Cell Height- 像素值，单个单元格高度
14 文本前景色索引 Text Foreground Color Index - 前景色在全局颜色列表中的索引
15 文本背景色索引 Text Blackground Color Index - 背景色在全局颜色列表中的索引
N
...
Plain Text Data - 一个或多个数据块(Data Sub-Blocks)组成，保存要在显示的字符串。

文本数据块

...

N+1 块终结 Block Terminator - 标识注释块结束，固定值0

推荐：1.由于文本的字体(Font)和尺寸(Size)没有定义，解码器应该根据情况选择最合适的；
2.如果一个字符的值小于0x20或大于0xF7，则这个字符被推荐显示为一个空格(0x20)；
3.为了兼容性，最好定义字符单元格的大小为8x8或8x16（宽度x高度）。

应用程序扩展(Application Extension)

这是提供给应用程序自己使用的（需要89a版本），应用程序可以在这里定义自己的标识、信息等，组成：

BYTE 7 6 5 4 3 2 1 0 BIT
1 扩展块标识 Extension Introducer - 标识这是一个扩展块，固定值0x21
2 图形控制扩展标签 Application Extension Label - 标识这是一个应用程序扩展块，固定值0xFF
3 块大小 Block Size - 块大小，固定值11
4 应用程序标识符 Application Identifier - 用来鉴别应用程序自身的标识(8个连续ASCII字符)
5
6
7
8
9
10
11
12 应用程序鉴别码 Application Authentication Code - 应用程序定义的特殊标识码(3个连续ASCII字符)
13
14
N
...
应用程序自定义数据块 - 一个或多个数据块(Data Sub-Blocks)组成，保存应用程序自己定义的数据

应用程序数据

...

N+1 块终结器 lock Terminator - 标识注释块结束，固定值0

文件结尾部分

文件终结器(Trailer)

这一部分只有一个值为0的字节，标识一个GIF文件结束.

BYTE 7 6 5 4 3 2 1 0  
1 文件终结
GIF Trailer - 标识GIF文件结束，固定值0x3B

二、在GDI+中绘制GIF

GDI+中绘制一个图片的代码如下:

      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分为两种，一种是静态的，对于这种格式的Gif，在GDI+中无需采用任何方法就能够直接显示(上面的代码就属于这种情况)。另一种是动态的， 这种文件能够显示简单的动画。动态的实际上由多幅静态的组成，在显示Gif时，每幅图片按照一定的时间间隔依次进行显示，从而实现了动画效果。
我把GIF封装成了一个类ImageEx,这个类继承了GDI+中的Image类。我们首先要做的工作是判断GIF是动态的还是静态的。

bool ImageEx::TestForAnimatedGIF()
{
       UINT count = 0;
       count = GetFrameDimensionsCount();
       GUID* pDimensionIDs = new GUID[count];
      
       // 得到子帧的对象列表
       GetFrameDimensionsList(pDimensionIDs, count);
      
    //获取总帧数
    m_nFrameCount = GetFrameCount(&pDimensionIDs[0]);
   
    // 假设图像具有属性条目 PropertyItemEquipMake.
    // 获取此条目的大小.
    int nSize = GetPropertyItemSize(PropertyTagFrameDelay);
   
    // 为属性条目分配空间.
    m_pPropertyItem = (PropertyItem*) malloc(nSize);
    GetPropertyItem(PropertyTagFrameDelay, nSize, m_pPropertyItem);
    delete pDimensionIDs;
    return m_nFrameCount > 1;
   
}m_pPropertyItem->value 是一个长整形数组, 每个长整形代表每帧的延时。由于获取的属性不同，GetPropertyItem会获得不同大小的对象， 因此要由用户来获得的对象大小，开辟与删除 GetPropertyItem相关的内存。对象的大小是通过GetPropertyItemSize 获取的，其参数是你所感兴趣的属性条目。 一旦获取了帧的数量与延时，我们就可生成一个线程来调用 DrawFrameGIF（）来显示。

       bool ImageEx::DrawFrameGIF()
       {
       ::WaitForSingleObject(m_hPause, INFINITE);
       GUID pageGuid = FrameDimensionTime;
       long hmWidth = GetWidth();
       long hmHeight = GetHeight();
       HDC 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;
       }