mini-gif

Welcome to mini-gif 👋

A GIF encoding and decoding library written in Vanilla JS

感谢

核心代码来自于以下两个库，该库只是做了部分整合方便使用。

解码GIF摘自 omggif。

编码GIF摘自 jsgif。

引入

In Browser

<script src="./dist/mini-gif.umd.js"></script>

ES Module

import minigif from 'minigif.js';

const { GIFEncoder, GIFDecoder } = minigif;

NodeJS

const minigif = require('minigif.js');

const { GIFEncoder, GIFDecoder } = minigif;

使用方法

具体使用见example文件夹下示例。

该库只有两个核心对象GIFDecoder和GIFEncoder。简单导出了另外两个库的对象，建议直接看源文件注释了解相关API。

GIFDecoder

GIFDecoder 接受一个GIF的二进制流（Unit8Array格式/browser Buffer/node）

const curFile = input.files[0];
const arrBuf = await curFile.arrayBuffer();
const buffer = new Uint8Array(arrBuf);
const gifReader = new minigif.GIFDecoder(buffer);

方法	参数	作用
numFrames	--	帧数
loopCount	----	播放次数
frameInfo	number	获取某一帧的信息（不含帧数据）
decodeAndBlitFrameRGBA	number,Uint8Array	需要传入一个arr接受该帧的rgba数据

属性	作用
frameInfo.x	x
frameInfo.y	y
frameInfo.width	w
frameInfo.height	h
frameInfo.delay	该帧的delay时间
frameInfo.disposal	可能为（0-4）/值为1的时候需要保留前一帧的数据，要不会有空白像素

GIFEncoder

const encoder = new minigif.GIFEncoder();
encoder.setRepeat(0);   // loop forever
encoder.setDelay(100);  // go to next frame every 100 ms
encoder.start();        // write header
encoder.addFrame(ctx);  // Render the frame from the canvas context.
ctx.font = '20px serif';
ctx.fillText('来追我啊！', 10, 50);
encoder.addFrame(ctx);  // Render the frame from the canvas context.
encoder.finish();       // finsh


const arr = encoder.stream().getUnit8Array();  //获取生成的Unit8Array
const file = new Blob([arr]);                  //生成文件
const url =  URL.createObjectURL(file);        //获取浏览器可用的地址

方法	参数	作用
start	--	写入GIF起始标志,之后才可以添加帧
setSize	w,h	size/不设默认为第一帧取size
setDelay	number 单位：1/100s	Sets the delay time between each frame, or changes it for subsequent frames(applies to last frame added)
setRepeat	number	播放次数/0为永久
setQuality	number(1-20)	default 10.(这个是采样率,值越小越精确,质量越高)
setDispose	number disposal code	--
setComment	string	--
setFrameRate	number	Sets frame rate in frames per second.
setTransparent	color值	--
addFrame	ImageData/ctx	添加帧/参数可以是ImageData或者ctx,ctx会自动获取画布的数据。
finish	--	结束添加数据，写入GIF结尾标志
cont	--	所以之前的操作都会被清空
stream	--	返回生成的ByteArray

// 添加了ByteArray.getUnit8Array 可用于浏览器端获取Unit8Array数据

支持一下

如果该库对你有帮助，可以点一下 ⭐️!