in src/gif_maker/index.ts [33:72]
async function createGifFromPngs(
imageUrls: string[],
targetWidth = 1024,
targetHeight = 1024,
) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error('Failed to create canvas context');
}
const gif = GIFEncoder();
const fpsInterval = 1 / fps;
const delay = fpsInterval * 1000;
for (const url of imageUrls) {
const img = new Image();
img.src = url;
await new Promise((resolve) => {
img.onload = resolve;
});
canvas.width = targetWidth;
canvas.height = targetHeight;
ctx.fillStyle = '#ffffff';
ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
const data = ctx.getImageData(0, 0, targetWidth, targetHeight).data;
const format = 'rgb444';
const palette = quantize(data, 256, {format});
const index = applyPalette(data, palette, format);
gif.writeFrame(index, targetWidth, targetHeight, {palette, delay});
}
gif.finish();
const buffer = gif.bytesView();
const blob = new Blob([buffer], {type: 'image/gif'});
const url = URL.createObjectURL(blob);
const img = new Image();
img.src = url;
return img;
}