开发Discord Bot为GIF添加文字后输出画质极低，寻求解决方案

你遇到的核心问题是这类基于canvas的GIF处理模块默认会做色彩压缩和帧数据精简，导致画质丢失——text-on-gif和canvas-gif底层用的是同一种简易GIF编码逻辑，换模块没用；下载原GIF也解决不了编码环节的压缩问题。

下面给你两个可行的解决方案，都是通过手动控制GIF编码参数来避免画质损失：

方案1：用gifencoder+canvas手动处理（精准控制编码） #

手动拆分原GIF的每一帧，添加文字后用高质量参数重新编码，完全规避默认压缩逻辑。

代码示例 #

const { Client, Events, GatewayIntentBits } = require("discord.js");
const { createCanvas, loadImage } = require("canvas");
const GIFEncoder = require("gifencoder");
const fs = require("fs");
const { parseGIF, decompressFrames } = require("gifuct-js");

const token = "";
const client = new Client({
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages,
    GatewayIntentBits.MessageContent,
  ],
});

client.once(Events.ClientReady, (c) => {
  console.log(`Bot online. Logged in as ${c.user.tag}`);
});

client.on("messageCreate", async (message) => {
  if (!message.reference) return;
  const targetMsg = await message.channel.messages.fetch(message.reference.messageId);
  const textToAdd = targetMsg.content;

  // 下载并解析原GIF
  const gifRes = await fetch("https://media.tenor.com/ASPoZ-hJLNQAAAAd/caracal-big.gif");
  const gifBuffer = await gifRes.arrayBuffer();
  const parsedGif = parseGIF(new Uint8Array(gifBuffer));
  const frames = decompressFrames(parsedGif, true);

  // 初始化编码器，完全继承原GIF的参数
  const encoder = new GIFEncoder(parsedGif.lsd.width, parsedGif.lsd.height);
  encoder.createReadStream().pipe(fs.createWriteStream("./test2.gif"));
  encoder.start();
  encoder.setRepeat(parsedGif.lsd.repeat); // 原GIF循环次数
  encoder.setDelay(frames[0].delay); // 原帧延迟时间
  encoder.setQuality(10); // 最高质量（0-10，10无压缩）
  encoder.setTransparent(parsedGif.lsd.transparent); // 保留原透明色

  // 创建画布
  const canvas = createCanvas(parsedGif.lsd.width, parsedGif.lsd.height);
  const ctx = canvas.getContext("2d");

  // 逐帧处理并添加文字
  for (const frame of frames) {
    // 绘制原帧数据
    const imgData = ctx.createImageData(parsedGif.lsd.width, parsedGif.lsd.height);
    imgData.data.set(frame.patch);
    ctx.putImageData(imgData, 0, 0);

    // 添加文字（可自行调整字体、颜色、位置）
    ctx.fillStyle = "#ffffff";
    ctx.font = "bold 24px Arial";
    ctx.textAlign = "center";
    ctx.fillText(textToAdd, canvas.width / 2, canvas.height - 20);

    // 将处理后的帧加入编码器
    encoder.addFrame(ctx);
  }

  encoder.finish();
  console.log("GIF处理完成");
});

client.login(token);

方案2：用sharp+gifwrap组合处理（高效且画质无损） #

sharp是高性能图像处理库，gifwrap能精准控制GIF的编码参数，两者配合可以避免不必要的压缩。

步骤 #

1. 安装依赖：

npm install sharp gifwrap

2. 核心处理代码（可整合到你的Discord Bot逻辑中）

const { GifFrame, GifUtil } = require("gifwrap");
const sharp = require("sharp");
const fs = require("fs");

async function addTextToGif(inputPath, outputPath, text) {
  // 读取原GIF
  const gif = await GifUtil.read(inputPath);

  // 逐帧处理文字
  for (const frame of gif.frames) {
    // 将帧转为sharp对象，添加SVG文字层
    const processedFrame = await sharp(frame.bitmap.data, {
      raw: { width: frame.width, height: frame.height, channels: 4 }
    })
    .composite([{
      input: Buffer.from(`<svg width="${frame.width}" height="${frame.height}"><text x="50%" y="90%" font-size="24" font-weight="bold" fill="white" text-anchor="middle">${text}</text></svg>`),
      gravity: "south"
    }])
    .raw()
    .toBuffer();

    // 更新帧数据
    frame.bitmap.data = Buffer.from(processedFrame);
  }

  // 保存处理后的GIF，禁用压缩
  await GifUtil.write(outputPath, gif, {
    quality: 100, // 最高质量
    colors: 256 // 保留原GIF的全色彩数
  });
}

// 调用示例（可放到你的messageCreate事件中）
// addTextToGif("./downloaded.gif", "./test2.gif", "你的文字");

关键注意点 #

• 必须手动设置编码器的quality参数为最高值，避免模块默认的色彩压缩和数据精简
• 尽量继承原GIF的宽高、循环次数、帧延迟等参数，避免额外缩放或变形
• 不要依赖模块的默认输出配置，手动控制编码参数是解决画质问题的核心

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