前端GIF生成及优化

Chase620 等级 603 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 生成需求可以进行了解。如对本文有什么问题,欢迎指正,一起学习。

收藏
评论区

相关推荐

JavaScript 中的二叉树以及二叉搜索树的实现及应用
接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据非有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:) (https://imghelloworld.osscnbe
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
前端GIF生成及优化
羚珑平台的动图可视化设计之前只支持mp4的导出,但在业务方使用场景中大部分需要投放GIF。故本文主要介绍使用 gif.js 生成 GIF 时遇到的一些问题、GIF压缩以及GIF的文件格式和对应编码在gif.js是如何实现的。 GIF 文件结构介绍 位图图形文件格式,采用 8 位( 256 色)重现真彩色的图像。它实际上是一种压缩文档,采用 LZW 压缩算
苹果官网 iphone12 文字渐变效果
1、0 今天无意间在看视频时,发现了一个up主实现iphone12官网的文字效果,闲来无事,自己也来弄弄看,先看看官网效果 这里搞了一个gif,不过也可以
VUE2 源码中 一个有趣的小动画
今天在vue2源码发现了一个有意思的小动画,挺有趣的,用 svg 和 Dynamics.js 动画库完成,啥也不说,先看看效果 一、看效果 GIF 2021319 171028(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/96096e7bd88b170e5846ae09
【Flutter实战】资源管理
2.4 资源管理Flutter APP安装包中会包含代码和 assets(资源)两部分。Assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(例如JSON文件)、配置文件、图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)等。 指定 assets和包管理一样,Flutter
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
JavaScript 是什么?
前言 引用《JavaScript 高级程序设计第四版》中说的话 ——“从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到。它很简单,学会用只要几分钟;它又很复杂,掌握它要很多年。要真正学好用好 JavaScript,理解其本质、历史及局限性是非常重要的”。 面试官:JavaScript 是什么? 我:
安利一些强无敌的 NPM 软件包
实用工具 Lodashlodash是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 安装及示例yarn add lodash 不要滥用,尽量使用 ES 自带方法 。我常用的一些方法如下// 深度比较两个对象的值是否全相等 import isEqu
三行Python程序代码实现MP4视频转GIF动画文件
一、引言最近看到好几篇类似“n行Python代码…”的博文,看起来还挺不错,简洁、实用,传播了知识、带来了阅读量,撩动了老猿的心,决定跟风一把,写个视频转动画的三行代码的极简实现。 二、moviepy2.1、moviepy介绍要实现视频转动画,老猿使用了moviepy库。 MoviePy是一个用于视频编辑的Python模块,可用于进行视频的基本操作(如剪
python中打开jpg的方法
在网上查到tkinter中PhotoImage只能打开gif文件,还不是仅仅改个后缀就完事的那种。而要打开的是一个.jpg文件。所以改用了ImageTk.PhotoImage
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
一篇文章带你了解JavaScript错误处理
大家好,我是前端进阶者。执行JavaScript代码时,可能会发生意想不到的错误。错误可以是程序员编写的编码错误,由于输入错误引起的错误以及其他不可预见的事情。因此,为了处理错误,JavaScript提供了4个关键字。一、JavaScript try ... catch语句try语句允许定义一个代码块,该代码块在执行时将进行错误测试,catch如果try块中
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT