I am trying to create a gif from multiple frames/images using the gifencoder package for node.js. However the package stacks the images one over the other and I would like to prevent it from stacking on each other, how can I accomplish this?
I do have a vague idea, as I have seen similar ways using GIMP and other image processors. But I do not know how to do it in node.js
My output You can see the previous frames are still visible on the back, and the new frames are just stacking above it (I would like the previous frame to be removed before the next frame comes)
const width = 600;
const height = 300;
//just the frames
const talos = client.monsters.get("talos").frames;
const vampy = client.monsters.get("vampy").frames;
const gif = new GIFEncoder(width, height, "octree");
gif.start();
gif.setQuality(1);
gif.setDelay(250);
const addFrames = async (framesList, inc) => {
const len1 = framesList[0].length;
const len2 = framesList[1].length;
const greater = len1 > len2 ? len1 : len2;
for (let i = 0; i < greater * 2; i++) {
const canvas = createCanvas(width, height);
const bg = await loadImage("images/bg.png");
const ctx = canvas.getContext("2d");
ctx.drawImage(bg, 0, 0, width, height);
const frames = framesList.map((f, p) => {
let len = p === 0 ? len1 : len2;
if (!f[i]) {
let m = Math.floor(i / len);
return f[i - len * m];
}
return f[i];
});
for (const frame of frames) {
if (!frame) continue;
const frameWidth = frame.width;
const frameHeight = frame.height;
const groundLevel = 250;
ctx.drawImage(
await loadImage(frame.buffer),
75 + inc * frames.indexOf(frame),
groundLevel - frameHeight,
frameWidth,
frameHeight
);
}
gif.addFrame(ctx);
}
};
await addFrames([talos, vampy], 300);
gif.finish();
const buffer = gif.out.getData();
writeFileSync("out.gif", buffer);