如何使用 jimp javascript 为动画 gif 图像添加水印？

Question

这些是我用于向图像添加水印的代码：

    const ORIGINAL_IMAGE = "https://example/sample_image;
    const LOGO = fs.readFileSync('gangle.png');
    const LOGO_MARGIN_PERCENTAGE = 5;

    let [image, logo] = await Promise.all([
      Jimp.read(ORIGINAL_IMAGE),
      Jimp.read(LOGO)
    ]);

    logo.resize(image.bitmap.width, Jimp.AUTO);

    const xMargin = (image.bitmap.width * LOGO_MARGIN_PERCENTAGE) / 100;
    const yMargin = (image.bitmap.width * LOGO_MARGIN_PERCENTAGE) / 100;

    const X = image.bitmap.width - logo.bitmap.width - xMargin;
    const Y = image.bitmap.height - logo.bitmap.height - yMargin;

    image.composite(logo, X, Y, [
      {
        mode: Jimp.BLEND_SCREEN,
        opacitySource: 0.1,
        opacityDest: 1
      }
    ]);

    image.write('animatedimg.gif')

但它仅适用于文件类型为 png/jpg/jpeg 的图像。 它不适用于 gif 图像。

它将生成一个文件“animatedimg.gif”，但该文件不会加载到任何图像查看器或浏览器中。

如果我尝试在 mac 中打开该文件，弹出窗口将显示以下消息： "文件“animatedimg.gif”为空，无法打开。"

在 jimp 中有没有办法做到这一点？ 或者还有其他 npm 包吗？ 谢谢。

Answer 1

令人困惑的是，Jimp 只处理单帧 GIF，而不是大多数人认为的多帧动画 GIF。所以你需要使用gifwrap。

您可以从那里遍历多帧 GIF 中的每一帧。每个帧都是一个GifFrame，可以来回转换为一个 Jimp 实例（参见文档中的Leveraging Jimp）。您可以将水印添加到与GifFrame 对应的每个 Jimp 实例中。像这样的：

async function getGifFramesWithWatermarks(gifPath) {
  const readGif = await GifUtil.read(gifPath);
  const promises = readGif.frames.map(getGifFrameWithWatermark);
  const gifFramesWithWatermarks = await Promise.all(promises);

  return gifFramesWithWatermarks;
}

async function getGifFrameWithWatermark(gifFrame) {
  const jimpImage = GifUtil.copyAsJimp(Jimp, gifFrame);

  addWatermark(jimpImage); // function you will write

  return new GifFrame(jimpImage.bitmap, {
    disposalMethod: gifFrame.disposalMethod, // not documented by gifwrap but it's in the source
    delayCentisecs: gifFrame.delayCentisecs, // you'll probably want this
  });
}

const gifFramesWithWatermarks = await getGifFramesWithWatermark(GIF_PATH);
await GifUtil.write(WRITE_PATH, gifFramesWithWatermarks);

Answer 2

更新 我写了这个 npm 库，你可以用它在 gif 上写文本。它仍然有一些错误：https://www.npmjs.com/package/text-on-gif

这对我有用

const Jimp = require("jimp");
const { GifUtil,GifFrame,BitmapImage} = require('gifwrap');
var frames = [];

Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(async function(font){
    await GifUtil.read("gif.gif").then(inputGif => {
        inputGif.frames.forEach(function(frame){
            jimpCopied = GifUtil.copyAsJimp(Jimp, frame);
            jimpCopied.print(font,0,0,"sanidhya");
            const GifCopied = new GifFrame(new BitmapImage(jimpCopied.bitmap,{
                disposalMethod: frame.disposalMethod,
                delayCentisecs: frame.delayCentisecs,
            }));
        frames.push(GifCopied);   
        });
    });
    GifUtil.quantizeDekker(frames);
    GifUtil.write("nyahhaha.gif",frames);
});

注意

仅当您的 Frame 使用超过 256 个颜色索引时才需要 qunatize*() 函数