[开源]基于WPF实现的Gif图片分割器，提取GIf图片中的每一帧

　　不知不觉又半个月没有更新博客了，今天终于抽出点时间，来分享一下前段时间的成果。

　　在网上，我们经常看到各种各样的图片，尤其是GIF图片的动态效果，让整个网站更加富有表现力！有时候，我们看到一些比较好看的GIF图片或者一些奇特的Gif图片，我们想要停留在某一帧看的清楚一点或者了解这个Gif动画到底是怎么实现的，怀着这种好奇的心理，我们来看一下，今天的开源项目，用WPF来实现GIF图片的预览和分离和保存。

 一、 GIF图片基本结构和原理

1、GIF简介

　　GIF(Graphics Interchange Format)是CompuServe公司开发的图像文件存储格式，1987年开发的GIF文件格式版本号是GIF87a，1989年进行了扩充，扩充后的版本号定义为GIF89a。 GIF图像文件以数据块(block)为单位来存储图像的相关信息。一个GIF文件由表示图形/图像的数据块、数据子块以及显示图形/图像的控制信息块组成，称为GIF数据流(Data Stream)。数据流中的所有控制信息块和数据块都必须在文件头(Header)和文件结束块(Trailer)之间。

　　GIF文件格式采用了LZW(Lempel-Ziv Walch)压缩算法来存储图像数据，定义了允许用户为图像设置背景的透明(transparency)属性。此外，GIF文件格式可在一个文件中存放多幅彩色图形/图像。如果在GIF文件中存放有多幅图，它们可以像演幻灯片那样显示或者像动画那样演示。

2、GIF文件结构

GIF文件结构的典型结构如图6-01所示。为下文说明方便，在构件左边加了编号。

数据块可分成3类：

控制块(Control Block)，图形描绘块(Graphic-Rendering Block)和专用块(Special Purpose Block)。

(1) 控制块：

控制块包含有用来控制数据流(Data Stream)或者设置硬件参数的信息，其成员包括：
GIF文件头(Header)
逻辑屏幕描述块(Logical Screen Descriptor)
图形控制扩展块(Graphic Control Extension)
文件结束块(Trailer)

(2) 图形描绘块：

包含有用来描绘在显示设备上显示图形的信息和数据，其成员包括：
图像描述块(Image Descriptor)
无格式文本扩展块(Plain Text Extension)
全局调色板、局部调色板、图像压缩数据和图像说明扩充块。

(3) 特殊用途数据块：

包含有与图像处理无关的信息，其成员包括：
注释扩展块(Comment Extension)
应用扩展块(Application Extension)
除了在控制块中的逻辑屏幕描述块(Logical Screen Descriptor)和全局彩色表(Global Color Table)的作用范围是整个数据流(Data Stream)之外, 所有其他控制块仅跟在它们后面的图形描绘块。

3、GIF结构详解

由于GIF结构比较复杂，我们就简单讲解一下GIF的文件头吧，因为我们要用到，更多的资料请参看百度文库：http://wenku.baidu.com/view/2c0feaa6f524ccbff121841d.html。

(1)文件头描述块(Header)定义GIF数据流(GIF Data Stream)，它的结构如图6-02所示。文件头描述块(Header)由GIF标记域(Signature)和版本号(Version)域组成，是一个由6个固定字节组成的数据块，它们用来说明使用的文件格式是GIF格式及当前所用的版本号。GIF标记域(Signature)存放的是“GIF”，版本号域存放的是1987年5月发布的“87a”或者1989年7月发布的“89a”，或者更加新的版本号。

这里我们识别一个图片是不是GIF文件，就是判断文件的前三个字节是不是GIF，就算是图片呗重命名为jpg或者其他的，只要用浏览器打开，都是可以正常显示的，这也就是为什么有些jpg图片也会动的原因。同理PNG图片的前三个图片是PNG.

(2)逻辑屏幕描述块(Logical Screen Descriptor)包含定义图像显示区域的参数，包括背景颜色信息。这个数据块中的坐标相对于虚拟屏幕的左上角，不一定是指显示屏的绝对坐标，这就意味可以参照窗口软件环境下的窗口坐标或者打印机坐标来设计图像显示程序。逻辑屏幕描述块的结构如图6-03所示：

这里我们看到GIF的字段，可以读取GIF图片的实际高度和宽度，到这里就差不多了，其他的大家看百度文库的文档吧，我就不再说了。

 二、 GIF分解工具简介

　　上面给大家讲了那么多的GIF文件的东西，可能大家看的有点不耐烦，目的主要是为了让大家了解GIF的结构，这样才能更好的读懂项目里面的代码。下面来看一段读取GIF文件信息的代码，体会一下：

private void ShowGifInfo(byte[] buffer, string imgPath)
      {
         string type = ASCIIEncoding.ASCII.GetString(buffer, , ); //前3个字节，标识"GIF"
         string version = ASCIIEncoding.ASCII.GetString(buffer, , );//3~6个字节，版本号
         int logicalWidth = BitConverter.ToUInt16(buffer, );//第7，8两个字节，宽度
         int logicalHeight = BitConverter.ToUInt16(buffer, ); //第9，10两个字节，高度
 
         txtFileName.Text = "图片路径: " + imgPath;
         txtTotalFrames.Text = "总帧数: " + bd.Frames.Count.ToString();
         txtRealHeight.Text = "实际高度: " + logicalHeight.ToString() + "px";
         txtRealWidth.Text = "实际宽度: " + logicalWidth.ToString() + "px";
         txtVersion.Text = "Gif版本: " + version;
      }

这段代码读取和显示GIF的标识、版本号、宽度和高度信息。可以看到，都是读取文件的特定的几个字节。

下面来看看这个开源项目的界面吧，首先GIF图片，如下：

看起来很炫，是吧，然后我们来看看到底都有哪些帧组成的，如图：

我们可以看到GIF的版本号和帧数，一共是8帧，也就是八张图片，我们点击另存为，输入图片名称，如Img,保存每一帧图片，如图：

我们看到，八张图片都分离出来了，看起来好漂亮啊，图片的名字就是我们刚才输入的名称后面加上编号。

下面我们来看几个比较神秘的GIF，如下图：

    

这几张图片看起来是无限循环的，没有停顿，那么他们到底有多少帧呢？这个就留给大家去探索吧！

叫你看完不点推荐，见你看完不点推荐……

 三、 Github开源地址

Github开源地址：https://github.com/yunfeifei/GifSeparator/

　　项目中有不足的地方，大家可以留言指出，我会第一时间修改更正！同时欢迎大家一起进QQ群学习交流~

作者：雲霏霏

QQ交流群：243633526

博客地址：http://www.cnblogs.com/yunfeifei/

声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。

如果大家感觉我的博文对大家有帮助，请推荐支持一把，给我写作的动力。