modern-gif
## Features
- ⚡️ Encode, Decode
- 🎨 Set max colors(2 - 255)
- 🦄️ Compression size
- ☁️️ Web Worker
- 🦾 TypeScript
## Install
```sh
npm i modern-gif
```
## Usage
```ts
import { encode } from 'modern-gif'
// import the workerUrl through Vite
import workerUrl from 'modern-gif/worker?url'
const output = await encode({
// workerUrl is optional
workerUrl,
width: 200,
height: 200,
frames: [
// CanvasImageSource | BufferSource | string
{ data: '/example1.png', delay: 100 },
{ data: '/example2.png', delay: 100 }
],
})
const blob = new Blob([output], { type: 'image/gif' })
window.open(URL.createObjectURL(blob))
```
Decode
```ts
import { decode, decodeFrames } from 'modern-gif'
import workerUrl from 'modern-gif/worker?url'
const buffer = await window.fetch('/test.gif')
.then(res => res.arrayBuffer())
// GIF file format data without image data
const gif = decode(buffer)
console.log(gif)
// Image data for all frames (workerUrl is optional)
const frames = await decodeFrames(buffer, { workerUrl })
frames.forEach((frame) => {
const canvas = document.createElement('canvas')
canvas.width = frame.width
canvas.height = frame.height
canvas.getContext('2d').putImageData(
new ImageData(frame.data, frame.width, frame.height),
0,
0,
)
document.body.append(canvas)
})
```
Compression size
It is easy to compress a gif by encoding and decoding
```ts
import { decode, decodeFrames, encode } from 'modern-gif'
// import the workerUrl through Vite
import workerUrl from 'modern-gif/worker?url'
const buffer = await window.fetch('/test.gif')
.then(res => res.arrayBuffer())
const gif = decode(buffer)
// workerUrl is optional
const frames = await decodeFrames(buffer, { workerUrl })
const output = await encode({
// workerUrl is optional
workerUrl,
width: gif.width,
height: gif.height,
frames,
// lossy compression 2 - 255
maxColors: 255,
})
const blob = new Blob([output], { type: 'image/gif' })
window.open(URL.createObjectURL(blob))
```
CDN
```html
```
## Types
See the [types.ts](src/types.ts)
## Encode Options
See the [options.ts](src/options.ts)
## Specifications
[GIF89a Spec](https://www.w3.org/Graphics/GIF/spec-gif89a.txt)