Create a GIF with Node
Posted on September 17, 2020
Here the snippet of code that creates a GIF animation using a list of pictures using a combination of GifEncoder and Node-Canvas as well.
const GIFEncoder = require('gifencoder')
const width = 900
const height = 600
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(width, height)
const ctx = canvas.getContext('2d')
const encoder = new GIFEncoder(width, height)
encoder.createReadStream().pipe(fs.createWriteStream('animated.gif'))
encoder.start()
encoder.setRepeat(0)
encoder.setDelay(500)
encoder.setQuality(10)
const list = fs.readdirSync('images/')
list.forEach(async (f, i) => {
const image = await loadImage('images/' + f)
ctx.drawImage(image, 0, 0)
encoder.addFrame(ctx)
if (i === list.length - 1) {
encoder.finish()
}
})
I've tried first using fs module to load the images but ended up with a lot of issues trying to convert the buffer to something GifEncoder likes, thus, I've used the loadImage method from node-canvas package.
Have fun!