如何在NodeJS中使用fabricjs从canvas渲染生成GIF

问题根因 #

• 使用gifuct-js将GIF拆分为多帧存入fabric对象后，canvas.toJSON()会序列化所有帧的像素数据，直接导致JSON体积飙升到10MB+
• 服务端默认的StaticCanvas仅支持静态帧渲染，没有原生处理GIF帧序列和动效的能力

前端优化：压缩传输JSON体积 #

不要将GIF帧数据存入fabric序列化结果，仅保留必要的GIF元信息即可，完全兼容现有静态元素序列化逻辑：

• 给GIF对应的fabric对象扩展自定义字段，仅存储gifSrc（原始GIF资源ID/存储路径）、位置、缩放、透明度、播放速率等布局属性
• 序列化时通过toJSON的第二个参数过滤冗余的帧像素字段：

// 前端序列化代码
const json = canvas.toJSON(['gifSrc', 'gifLeft', 'gifTop', 'gifScale', 'gifOpacity', 'gifPlaybackRate']);

优化后JSON体积和普通静态元素的序列化结果基本一致，不会额外占用传输带宽。

后端实现GIF动态渲染 #

后端采用fabric.js+sharp+gifuct-js组合方案实现动图渲染，无需修改原有静态渲染逻辑：

1. 从接收的精简JSON中拆分出静态元素、GIF元素两类数据
2. 先用StaticCanvas渲染所有静态元素生成底图Buffer
3. 用gifuct-js读取原始GIF资源，解析帧时长、尺寸、偏移等元信息
4. 用sharp将每帧GIF与静态底图合成，最后按顺序拼接为动态GIF输出
   核心实现代码：

const sharp = require('sharp');
const { GIF } = require('gifuct-js');
const fs = require('fs');
const fabric = require('fabric').fabric;

app.get('/render-gif', async (req, res) => {
  const parsedJson = JSON.parse(req.query.canvasJson);
  const gifElements = parsedJson.objects.filter(item => item.gifSrc);
  const staticElements = parsedJson.objects.filter(item => !item.gifSrc);

  // 渲染静态底图
  const baseBuffer = await new Promise((resolve) => {
    const canvas = new fabric.StaticCanvas(null, { width: 800, height: 400 });
    canvas.loadFromJSON({...parsedJson, objects: staticElements}, () => {
      canvas.renderAll();
      const chunks = [];
      const stream = canvas.createPNGStream();
      stream.on('data', chunk => chunks.push(chunk));
      stream.on('end', () => resolve(Buffer.concat(chunks)));
    })
  });

  // 解析原始GIF
  const gifBuffer = fs.readFileSync(`./gif-resource/${gifElements[0].gifSrc}`); // 替换为自身业务的GIF资源读取逻辑
  const gif = new GIF(gifBuffer);
  await gif.decode();

  // 逐帧合成
  const frames = [];
  for (const frame of gif.frames) {
    const frameBuffer = Buffer.from(frame.patch);
    const compositeFrame = await sharp(baseBuffer)
      .composite([{
        input: frameBuffer,
        left: Math.round(gifElements[0].gifLeft + frame.left),
        top: Math.round(gifElements[0].gifTop + frame.top),
      }])
      .png()
      .toBuffer();
    frames.push({
      input: compositeFrame,
      delay: frame.delay * 10 // 单位从10ms转为sharp要求的ms
    });
  }

  // 输出最终GIF
  res.writeHead(200, { 'Content-Type': 'image/gif' });
  sharp(frames[0].input, { animated: true })
    .gif({ loop: 0 })
    .pipe(res);
});

可选优化点 #

• 存在多个GIF元素时，逐帧合成阶段遍历所有GIF的对应帧叠加即可
• 大尺寸GIF可开启sharp的压缩参数，降低输出文件体积
• 对相同渲染参数做服务端缓存，避免重复渲染浪费资源

内容的提问来源于stack exchange，提问作者Anirudh