.. | ||
dist | ||
CHANGELOG.md | ||
LICENSE.md | ||
package.json | ||
README.md |
Features
- @skyra/gifenc is a GIF encoding utility library to build your next GIFs.
- Supports CommonJS and ES Module.
- Heavily based on
gifencoder
, this module wouldn't have existed without its author.
Installation
You can use the following command to install this package, or replace npm install
with your package manager of choice.
npm install @skyra/gifenc
Usage
@skyra/gifenc
is very close to a drop-in replacement forgifencoder
. There are only 2 differences to account for. First of all, the encoder class is namedGifEncoder
and notGIFEncoder
, and secondly, the metadata methods are chainable.
Streaming API - Writing to a file
const { GifEncoder } = require('@skyra/gifenc');
const { createWriteStream } = require('node:fs');
const encoder = new GifEncoder(400, 400);
// Set the repeat mode: 0 for repeat, -1 for no-repeat:
.setRepeat(0)
// Set the frame delay in milliseconds:
.setDelay(500)
// Set the image quality, 10 is default:
.setQuality(10);
// Create a read stream and pipe it into a file write stream:
encoder.createReadStream()
.pipe(createWriteStream('my-file.gif'));
encoder.start();
// `getFrames` enumerates over frames
for (const frame of getFrames()) {
encoder.addFrame(frame);
}
encoder.finish();
Streaming API - Get resulting Buffer
We can use streamConsumers.buffer()
from Node.js to convert the stream into a buffer starting with Node.js v16.7.0, if you're using an older version, consider making a function using stream's async iterator (Node.js v10+) or use a package.
const { GifEncoder } = require('@skyra/gifenc');
const { buffer } = require('node:stream/consumers');
const encoder = new GifEncoder(400, 400);
const stream = encoder.createReadStream();
encoder.setRepeat(0).setDelay(500).setQuality(10).start();
// `getFrames` enumerates over frames
for (const frame of getFrames()) {
encoder.addFrame(frame);
}
encoder.finish();
const result = await buffer(stream);
Using with canvas-constructor
const { GifEncoder } = require('@skyra/gifenc');
const { Canvas } = require('canvas-constructor/skia');
// const { Canvas } = require('canvas-constructor/cairo');
const canvas = new Canvas(400, 400);
const encoder = new GifEncoder(400, 400);
const stream = encoder.createReadStream();
encoder.setRepeat(0).setDelay(500).setQuality(10).start();
const colors = ['#98DDCA', '#D5ECC2', '#FFD3B4', '#FFAAA7'];
for (const color of colors) {
canvas.setColor(color).printRectangle(0, 0, 400, 400);
encoder.addFrame(canvas);
}
// ...
Using with ECMAScript Modules
@skyra/gifenc
supports ESM out of the box. To import the GifEncoder
class, you use the following statement:
import { GifEncoder } from '@skyra/gifenc';
Buy us some doughnuts
Skyra Project is open source and always will be, even if we don't get donations. That said, we know there are amazing people who may still want to donate just to show their appreciation. Thanks you very much in advance!
We accept donations through Patreon, BitCoin, Ethereum, and Litecoin. You can use the buttons below to donate through your method of choice.
Donate With | QR | Address |
---|---|---|
Patreon | ![]() |
Click Here |
PayPal | ![]() |
Click Here |
BitCoin | ![]() |
3JNzCHMTFtxYFWBnVtDM9Tt34zFbKvdwco |
Ethereum | ![]() |
0xcB5EDB76Bc9E389514F905D9680589004C00190c |
Litecoin | ![]() |
MNVT1keYGMfGp7vWmcYjCS8ntU8LNvjnqM |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Antonio Román 💻 🤔 🚇 |
Jeroen Claassens 🚇 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!