modern-gif

Features

• ⚡️ Encode, Decode

• 🎨 Set max colors(2 - 255)

• 🦄️ Compression size

• ☁️️ Web Worker

• 🦾 TypeScript

Install

npm i modern-gif

Usage

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

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

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

<script src="https://unpkg.com/modern-gif"></script>
<script>
  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()
  })
</script>

Types

See the types.ts

Encode Options

See the options.ts

Specifications

GIF89a Spec