https://github.com/qq15725/modern-gif

🚀 JavaScript GIF Codec.
https://github.com/qq15725/modern-gif

color-quantization gif gif-decoder gif-encoder gif-js gif-optimization gifenc omggif

Last synced: about 1 month ago
JSON representation

🚀 JavaScript GIF Codec.

• Host: GitHub
• URL: https://github.com/qq15725/modern-gif
• Owner: qq15725
• License: mit
• Created: 2023-02-08T07:14:05.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-27T07:26:37.000Z (9 months ago)
• Last Synced: 2024-04-23T21:22:42.665Z (8 months ago)
• Topics: color-quantization, gif, gif-decoder, gif-encoder, gif-js, gif-optimization, gifenc, omggif
• Language: TypeScript
• Homepage: https://modern-gif.vercel.app
• Size: 4.29 MB
• Stars: 24
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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

  modernGif.encode({

    width: 200, height: 200,

    frames: [

      // CanvasImageSource | BufferSource | string

      { data: '/example1.png', delay: 100 },

      { data: '/example2.png', delay: 100 }

    ],

  }).then(output => {

    const blob = new Blob([output], { type: 'image/gif' })

    const link = document.createElement('a')

    link.download = 'screenshot.png'

    link.href = URL.createObjectURL(blob)

    link.click()

  })

```




## 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)