开发者社区> 雲霏霏> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:   不知不觉又半个月没有更新博客了,今天终于抽出点时间,来分享一下前段时间的成果。   在网上,我们经常看到各种各样的图片,尤其是GIF图片的动态效果,让整个网站更加富有表现力!有时候,我们看到一些比较好看的GIF图片或者一些奇特的Gif图片,我们想要停留在某一帧看的清楚一点或者了解这个Gif动画到底是怎么实现的,怀着这种好奇的心理,我们来看一下,今天的开源项目,用WPF来实现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, 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,如下图:

     

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

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

 

 三、 Github开源地址

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

 

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

 

 作者:雲霏霏

QQ交流群:243633526

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

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

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF中实现多选ComboBox控件
原文:WPF中实现多选ComboBox控件 在WPF中实现带CheckBox的ComboBox控件,让ComboBox控件可以支持多选。 将ComboBox的ItemsSource属性Binding到一个Book的集合, public class Book { ...
2814 0
WPF 4 DataGrid 控件(基本功能篇)
原文:WPF 4 DataGrid 控件(基本功能篇)      提到DataGrid 不管是网页还是应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将详细介绍WPF 4 中DataGrid 的相关功能。
1135 0
WPF 控件库——仿制Windows10的进度条
原文:WPF 控件库——仿制Windows10的进度条 一、其实有现成的   先来看看Windows10进度条的两种模式:       网上有不少介绍仿制Windows10进度条的文章,也都实现了不错的效果。
1117 0
WPF 控件库——仿制Chrome的ColorPicker
原文:WPF 控件库——仿制Chrome的ColorPicker 一、观察   项目中的一个新需求,需要往控件库中添加颜色拾取器控件,因为公司暂时还没有UI设计大佬入住,所以就从网上开始找各种模样的ColorPicker,找来找去我就看上了谷歌浏览器自带的,它长这个样:         看上去不错,可以搞!搞之前得观察一下这里面可能的一些坑。
1192 0
WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
原文:WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox 一.前言   申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
1822 0
在WPF的WebBrowser控件中抑制脚本错误
原文:在WPF的WebBrowser控件中抑制脚本错误 今天用WPF的WebBrowser控件的时候,发现其竟然没有ScriptErrorsSuppressed属性,导致其到处乱弹脚本错误的对话框,在MSDN上找到了如下解决方案:  1 static void SuppressScriptE...
918 0
WPF下可编辑Header的Tab控件实现
介绍 有这样一个需求,当用户双击Tab控件Header区域时, 希望可以直接编辑。对于WPF控件,提供一个ControlTemplate在加上一些Trigger就可以实现。效果如下: 代码 首先,我们需要给Tab Header设计一个ControlTemplate。
935 0
+关注
雲霏霏
致力于开发,运维~~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载