[开源]基于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, 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/

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

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

 

时间: 2024-10-02 07:45:29

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

如何将1.38G的JP2格式图片分割

问题描述 如何将1.38G的JP2格式图片分割 求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答.求教大神解答. 解决方案 你先用GdalToTiles: C# Program (open source) for make image tiles for Google Earth with KML Superoverlay.这个开源项目看看能不能切割成你需要的图片.

基于WPF系统框架设计(5) Ribbon整合Avalondock 2.0实现多文档界面设计(二)

AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的 版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. AvalonDock 2.0版本已经发布了,新版本 是用MVVM框架重新编写,似乎也用了Command(命令)模式.2.0版的文档尚未发布,但你可以参考 Avalon.TestApp 或者2.0版源码中的Avalon.MVVMTestApp文件夹来查看新的API. 前一篇博文有介绍关于AvalonDoc

腾讯开源基于HTML5技术的专业级图像处理引擎 AlloyImage

腾讯开源基于http://www.aliyun.com/zixun/aggregation/33875.html">HTML5技术的专业级图像处理引擎 Alloy Image 发表于16小时前| 次阅读| 来源CSDN| 0 条评论| 作者张红月 腾讯AlloyTeamAlloyImageAlloyPhotoGitHub开源HTML5 摘要:近日,腾讯 Web前端团队AlloyTeam推出了最 新的开源项目:一个基于HTML5技术的专业级图像处理引擎--AlloyImage(简称AI),以

Fireworks图片分割图解教程

教程 本教程将利用FWMX2004做一个分割图片以及在DW中如何排版的示范,希望能帮到一些对分割图片还存有疑问的人.教程中如有什么不妥之处,请各位指证.            图片的分割主要用在两个方面,第一是把较大的图像分割成小图,意在减少浏览者下载图片的时间,第二是把图像分割后要在其中的某一部分录入文字,或者是之前做了整页设计现在要分割开来填入具体的内容.对于第一种分割比较简单,而第二种分割除了要考虑第一种分割时将大图化小的要求之外,还要注意分割要填内容的部分并且要保证在网页中输入预想的内容

java将图片分割为几个部分示例_java

以下代码使用java将图片分割为几个部分,大家参考使用吧 复制代码 代码如下: public class SegmentationImage{    public static Icon Segmentation(String imagename,int Width,int Height,int height,int width) throws Exception{  // 准备分割图片      BufferedImage img1=ImageIO.read(new File(imagenam

工具-JP2图片分割JP2图片分割

问题描述 JP2图片分割JP2图片分割 依据网上所说使用GDAL这套库的gdal_translate工具来分割,但是一使用这个工具,命令行就报can not copy box data

VSTO学习笔记(七)基于WPF的Excel分析、转换小程序

原文:VSTO学习笔记(七)基于WPF的Excel分析.转换小程序 近期因为工作的需要,要批量处理Excel文件,于是写了一个小程序,来提升工作效率. 小程序的功能是对Excel进行一些分析.验证,然后进行转换.   概述 小程序主界面如下: 首先选择一个日期和类别,从命名上对待分析的Excel文件进行过滤.点击[浏览]选择待分析的Excel文件所在的目录, 程序中会获取所有子目录.然后点击[执行分析]就会按照左边CheckBox中的选择进行分析,分析结果显示在每一行中间.[修改配置]可以对分析

WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现

原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现         去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,

基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)_javascript技巧

最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m