[開源]基於WPF實現的Gif圖片分割器，提取GIf圖片中的每一幀

　　不知不覺又半個月沒有更新博客了，今天終於抽出點時間，來分享一下前段時間的成果。

　　在網上，咱們常常看到各類各樣的圖片，尤爲是GIF圖片的動態效果，讓整個網站更加富有表現力！有時候，咱們看到一些比較好看的GIF圖片或者一些奇特的Gif圖片，咱們想要停留在某一幀看的清楚一點或者瞭解這個Gif動畫究竟是怎麼實現的，懷着這種好奇的心理，咱們來看一下，今天的開源項目，用WPF來實現GIF圖片的預覽和分離和保存。

 

 1、 GIF圖片基本結構和原理

一、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文件中存放有多幅圖，它們能夠像演幻燈片那樣顯示或者像動畫那樣演示。

二、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)以外, 全部其餘控制塊僅跟在它們後面的圖形描繪塊。

 

三、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圖片的實際高度和寬度，到這裏就差很少了，其餘的你們看百度文庫的文檔吧，我就再也不說了。

 

 2、 GIF分解工具簡介

 　　上面給你們講了那麼多的GIF文件的東西，可能你們看的有點不耐煩，目的主要是爲了讓你們瞭解GIF的結構，這樣才能更好的讀懂項目裏面的代碼。下面來看一段讀取GIF文件信息的代碼，體會一下：

private void ShowGifInfo(byte[] buffer, string imgPath)
      {
         string type = ASCIIEncoding.ASCII.GetString(buffer, 0, 3); //前3個字節，標識"GIF"
         string version = ASCIIEncoding.ASCII.GetString(buffer, 3, 3);//3~6個字節，版本號
         int logicalWidth = BitConverter.ToUInt16(buffer, 6);//第7，8兩個字節，寬度
         int logicalHeight = BitConverter.ToUInt16(buffer, 8); //第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，以下圖：

     

這幾張圖片看起來是無限循環的，沒有停頓，那麼他們到底有多少幀呢？這個就留給你們去探索吧！

叫你看完不點推薦，見你看完不點推薦……

 

 3、 Github開源地址

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

 

　　項目中有不足的地方，你們能夠留言指出，我會第一時間修改更正！同時歡迎你們一塊兒進QQ羣學習交流~

 

 做者：雲霏霏

QQ交流羣：243633526

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

 聲明：本博客原創文字只表明本人工做中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未受權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

若是你們感受個人博文對你們有幫助，請推薦支持一把，給我寫做的動力。