Node - 为啥我的 gif 在使用 GifEncoder 时这么慢

Posted 2023-03-25

【中文标题】Node - 为啥我的 gif 在使用 GifEncoder 时这么慢

【英文标题】：Node - Why is my gif so slow when using GifEncoderNode - 为什么我的 gif 在使用 GifEncoder 时这么慢

【发布时间】：2022-01-06 02:26:47

【问题描述】：

我想用GifEncoder (older version) 渲染一个 Gif，但不幸的是，gif 输出要慢得多，或者可以说它滞后了。这是我的代码：

import GIFEncoder from "gif-encoder-2";
import fs from "fs";

import pkg from "canvas";
const  createCanvas  = pkg;

let frame = 0;
const size = 200;
const fr = 60; //starting FPS
const encoder = new GIFEncoder(size, size);

encoder
  .createReadStream()
  .pipe(fs.createWriteStream("my.gif"));

encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(0); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

var canvas = createCanvas(size, size),
  cw = canvas.width,
  ch = canvas.height,
  cx = null,
  fps = 60,
  bX = 30,
  bY = 30,
  mX = 10,
  mY = 20,
  interval = null;

function gameLoop() 
  cx.clearRect(0, 0, cw, cw);

  cx.beginPath();
  cx.fillStyle = "red";
  cx.arc(bX, bY, 20, 0, Math.PI * 360);
  cx.fill();
  if (bX >= cw || bX <= 0) 
    mX *= -1;
  
  if (bY >= ch || bY <= 0) 
    mY *= -1;
  

  bX += mX;
  bY += mY;

  encoder.addFrame(cx);

  console.log(frame);

  if (frame > 60) 
    clearInterval(interval);
    encoder.finish();
  

  ++frame;


if (typeof canvas.getContext !== undefined) 
  cx = canvas.getContext("2d");

  interval = setInterval(gameLoop, 1000 / fps);

这是输出

我从这个fiddle 中举了一个例子，你可以看到，球应该看起来有多光滑。

到目前为止我尝试过的都没有成功，

使用 GifEncoder 时不创建流 在数组中收集cx，然后使用 GifEncoder，但似乎ctx 是一个引用对象，我找不到复制它的方法 希望与 P5 一起玩，当帧之间的 deltaTime 过高时，他们有一个内部计算

有人可以在这里帮助我或给我建议吗？

【参考方案1】：

看来，我已经有了解决办法。将延迟设置为：

encoder.setDelay(30); // frame delay in ms

已经平滑了 gif：

我的建议。睡一晚，从新鲜的头脑开始