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

问题描述

这些是我用来在图像上添加水印的代码：

    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软件包？ 谢谢。

解决方法

令人困惑的是，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);

,

这对我有用

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,"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*() 函数