前端GIF生成及优化

Chase620 等级 978 0 0
标签: Javascript

羚珑平台的动图可视化设计之前只支持mp4的导出,但在业务方使用场景中大部分需要投放GIF。故本文主要介绍使用 gif.js 生成 GIF 时遇到的一些问题、GIF压缩以及GIF的文件格式和对应编码在gif.js是如何实现的。

GIF 文件结构介绍

位图图形文件格式,采用 8 位( 256 色)重现真彩色的图像。它实际上是一种压缩文档,采用 LZW 压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。

下图是 GIF 的文件结构示意图: 前端GIF生成及优化

GIF 主要是由不同的数据块组成,包括:头部信息,逻辑屏幕描述符,全局颜色表,图形控件扩展,图像描述符,局部颜色表,图像数据,纯文本扩展,应用程序扩展,注释扩展和尾部。文件存储从左开始,中间分支处可以根据需要循环多次(表示 GIF 重复播放)。

接下来我们将根据下面简单的 GIF 文件及其 16 进制文件,逐一分析 GIF 格式各块的作用。 前端GIF生成及优化

头部信息 ( Header )

GIF 文件的前 6 个字节表式 GIF 的文件头信息,这些字节应全部对应于 ASCII 字符代码。头部信息中前三个字节表示 GIF 文件署名,这些值应始终为 "GIF"( 即 47 = "G",49 = "I",46 = "F"),后三个字节表示版本号 "89a" (即 38 = "8", 39 = "9" ,61 = "a")。目前的版本号有 "87a" 和 "89a",前者已经几乎看不到了。

前端GIF生成及优化

// GIF 头部信息  'GIF89a' 写入
GIFEncoder.prototype.writeHeader = function () {
  this.out.writeUTFBytes('GIF89a')
}

ByteArray.prototype.writeUTFBytes = function (string) {
  for (var l = string.length, i = 0; i < l; i++)
    this.writeByte(string.charCodeAt(i))
}

最后, GIF 生成虽然有现成的库,但是如果不了解其文件结构,查看源码的时候可能就跟我开始一样,一头雾水。感兴趣的朋友或者有 GIF 生成需求可以进行了解。如对本文有什么问题,欢迎指正,一起学习。

收藏
评论区

相关推荐

前端GIF生成及优化
羚珑平台的动图可视化设计之前只支持mp4的导出,但在业务方使用场景中大部分需要投放GIF。故本文主要介绍使用 gif.js 生成 GIF 时遇到的一些问题、GIF压缩以及GIF的文件格式和对应编码在gif.js是如何实现的。 GIF 文件结构介绍 位图图形文件格式,采用 8 位( 256 色)重现真彩色的图像。它实际上是一种压缩文档,采用 LZW 压缩算
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
JPG、PNG和GIF图片的基本原理及优…
JPG、PNG和GIF图片的基本原理及优化方法 ======================= 一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。 我们常见的图
JPG、PNG和GIF图片的基本原理及优化方法
JPG、PNG和GIF图片的基本原理及优化方法 ======================= 一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。 我们常见的图
ES6 箭头函数大起底:熟知这几个特点让你少踩很多坑
![](https://oscimg.oschina.net/oscnet/e3ce59708caa880e627a2fe4a01fa660978.gif)  持续进步的同学都关注了“1024译站” 这是1024译站的第 90 篇文章 我们都知道,在 JavaScript 里定义函数有多种方式。最常见的是用`function`关键字: //
Java 8 新特性
Java 8 Nashorn JavaScript ========================= Nashorn 一个 javascript 引擎。 从JDK 1.8开始,Nashorn取代Rhino(JDK 1.6, JDK1.7)成为Java的嵌入式JavaScript引擎。Nashorn完全支持ECMAScript 5.1规范以及一些扩展。它
44个 JavaScript 经典题目详解与总结
![](https://oscimg.oschina.net/oscnet/a703da040f924ae868eb4be26e102a8f384.gif) 点击上方蓝色字体,关注我们 本文经授权转载自公众“前端大学” ------------------- ![](https://oscimg.oschina.net/oscnet/a4
Android中显示动画的GIF
首先看看GIF文件的存储结构和动画原理-->[\[转\]GIF图片的文件储存结构和动画原理](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.sina.com.cn%2Fs%2Fblog_571296860100jvhz.html) 以及已知的两种解决方案-->[Android &
JavaScript 踩坑心得— 为了高速(下)
#####**一.前言** 本文的上一篇 [JavaScript 踩坑心得— 为了高速(上)](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fnews.oneapm.com%2Fbi-javascript%2F) 主要和大家分享的是 JavaScript 使用过程中的基本原则以及编写过程中的
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript——面向对象以及基于类的继承
![](http://static.oschina.net/uploads/img/201601/15103654_Y7EU.gif) ![](http://static.oschina.net/uploads/img/201601/15103654_PyU6.gif) View Code 1 /*#######################
JavaScript俄罗斯方块游戏开发
![](https://oscimg.oschina.net/oscnet/4035f5f9-fff6-49ec-997e-e887a615972e.png)俄罗斯方块游戏,童年的回忆呀,相信大家都有玩过,今天我就带大家来讲解一下前端开发网页俄罗斯方块的开发方法。 ![](https://oscimg.oschina.net/oscnet/84683130
LEADTOOLS HTML5 Demos演示汇总
**LEADTOOLS HTML5/JavaScript Demo**系列展示了[LEADTOOLS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.evget.com%2Fsupplier%2F188)的部分特色功能,包含扩展的文件格式支持(TIFF,GIF,JPEG2000,JP
MATLAB 制作gif动画
1、已有一系列时序图片的基础上,可借助matlab制作gif图片,虽然比不上专业绘图制作的精良,好在比较方便。 2、假定时序图片的命名为:dens000000.tiff,dens000500,dens0010000,…… 3、效果展示 ![](https://oscimg.oschina.net/oscnet/60f02d50ada3717399c1b
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前