2.0.3 • Published 1 month ago
modern-gif v2.0.3
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))
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)
})
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))
<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
2.0.3
1 month ago
2.0.2
4 months ago
2.0.1
4 months ago
2.0.0
4 months ago
1.1.9
7 months ago
1.1.10
6 months ago
1.1.1
12 months ago
1.1.0
12 months ago
1.1.8
8 months ago
1.1.7
9 months ago
1.1.6
9 months ago
1.1.5
10 months ago
1.1.4
11 months ago
1.1.3
12 months ago
1.1.2
12 months ago
1.0.2
12 months ago
1.0.1
12 months ago
1.0.0
12 months ago
1.0.8
12 months ago
1.0.7
12 months ago
1.0.6
12 months ago
1.0.5
12 months ago
1.0.4
12 months ago
1.0.3
12 months ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago