为什么这段基于Jimp的彩虹GIF生成代码无法正常运行？

存在的问题 #

• 尺寸不匹配：初始化GifEncoder时写死了1280×720分辨率，和你加载的源图片尺寸不符，添加帧时像素数组长度不匹配会直接报错。
• getBuffer参数错误：Jimp的getBuffer方法第一个参数必须指定导出的MIME类型（比如Jimp.MIME_PNG），你直接传入回调函数无法拿到正确的图像缓存。
• 异步逻辑混乱：for循环是同步执行的，但内部的图像读取、调色、像素获取都是异步操作，会导致帧添加顺序混乱，甚至还没加完帧就先执行了gif.finish()。
• 存在未定义变量：代码中出现的addToGif函数、images变量都没有定义，属于冗余的残留代码，运行会直接抛错。
• 重复请求资源：每次循环都重复请求同一张网络图片，性能极差且容易触发网络异常，完全可以读取一次后复用实例。

修复后可运行代码 #

var Jimp = require('jimp');
var getPixels = require('get-pixels')
var GifEncoder = require('gif-encoder');
const fs = require('fs');

async function main() {
  // 先读取一次原图，后续直接复用
  const originImage = await Jimp.read('https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png');
  const width = originImage.bitmap.width;
  const height = originImage.bitmap.height;
  // 用原图尺寸初始化GIF编码器
  var gif = new GifEncoder(width, height);
  var file = fs.createWriteStream('img.gif');

  gif.pipe(file);
  gif.setQuality(20);
  // 每帧间隔100ms，可按需调整速度，单位为毫秒
  gif.setDelay(100);
  gif.writeHeader();

  // 按顺序处理每帧，保证异步执行顺序正确
  for (let i = 0; i <= 240; i++) {
    // 克隆原图再调色，避免修改原实例
    const processedImg = originImage.clone().color([{apply:'hue', params: [i]}]);
    // 正确传MIME类型拿buffer
    const buf = await processedImg.getBufferAsync(Jimp.MIME_PNG);
    // 用Promise包装getPixels的回调逻辑，保证顺序执行
    await new Promise((resolve, reject) => {
      getPixels(buf, 'image/png', function(err, pixels) {
        if (err) return reject(err);
        gif.addFrame(pixels.data);
        gif.read();
        resolve();
      })
    })
    // 最后一帧处理完再结束
    if (i === 240) {
      gif.finish();
    }
  }
}

main().catch(err => console.error('运行出错：', err));

使用说明 #

• 运行前请确保已经安装所有依赖：npm install jimp get-pixels gif-encoder
• 如果需要生成指定尺寸的GIF，可以先把原图用Jimp的resize方法缩放到对应尺寸，再初始化对应大小的GifEncoder即可。

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