【求教】Nodejs 能否实现GIF图片分解和合成

【求教】Nodejs 能否实现GIF图片分解和合成

如题：Nodejs 能否实现GIF图片分解和合成 期望是： 对一张动态GIF进行分解，然后在不同的页打上水印，在合成动态gif

2 回复

当然可以。Node.js 可以通过一些库来实现 GIF 图片的分解和合成。我们可以使用 gifuct-js 库来进行 GIF 的解析和合成，同时使用 gm 或 sharp 库来添加水印。

首先，我们需要安装这些依赖：

npm install gifuct-js gm sharp

接下来，我们编写代码来实现 GIF 的分解、添加水印以及合成。

分解 GIF

const gif = require('gifuct-js');
const fs = require('fs');

function decomposeGif(gifPath) {
    const buffer = fs.readFileSync(gifPath);
    const parsedGif = gif.parse(buffer);

    return parsedGif;
}

// 使用示例
const parsedGif = decomposeGif('path/to/your.gif');
console.log(parsedGif);

添加水印

为了给每一帧添加水印，我们将使用 sharp 库。假设你已经有了一个水印图片。

const sharp = require('sharp');
const fs = require('fs');

async function addWatermark(frame, watermarkPath) {
    const imageBuffer = await sharp(frame).composite([{ input: watermarkPath, gravity: 'southeast' }]).toBuffer();
    return imageBuffer;
}

// 使用示例
const watermarkPath = 'path/to/watermark.png';
const framesWithWatermark = [];

parsedGif.frames.forEach(frame => {
    addWatermark(frame.image.data, watermarkPath).then(newFrame => {
        framesWithWatermark.push({
            width: frame.width,
            height: frame.height,
            delay: frame.delay,
            image: newFrame
        });
    });
});

合成 GIF

最后，我们将所有带水印的帧重新组合成一个新的 GIF 文件。

const { createGif } = require('gifuct-js/lib/generate');

async function composeGif(frames, outputPath) {
    const framesData = frames.map(frame => ({
        data: frame.image,
        width: frame.width,
        height: frame.height,
        delay: frame.delay * 10 // Gif 编码器需要毫秒
    }));

    const result = createGif(framesData);
    await fs.promises.writeFile(outputPath, result);
}

// 使用示例
composeGif(framesWithWatermark, 'path/to/output.gif').then(() => {
    console.log('GIF 合成完成');
});

以上代码展示了如何使用 Node.js 对 GIF 进行分解、添加水印并重新合成。需要注意的是，上述代码中涉及异步操作，建议使用 async/await 来处理。


可以使用 Node.js 实现 GIF 图片的分解和合成。分解 GIF 图片意味着将每帧提取出来，而在每帧上添加水印后重新合成一个新的 GIF 文件。这可以通过 gifframes 和 gify 这样的库来实现。

示例代码

首先，需要安装必要的库：

npm install gifframes gify sharp

以下是具体的实现步骤：

  1. 分解 GIF： 使用 gifframes 将 GIF 分解成单个帧。

  2. 处理帧（例如添加水印）： 可以使用 sharp 来添加水印。

  3. 合成 GIF： 使用 gify 将处理后的帧重新组合成一个新 GIF。

示例代码：

const fs = require('fs');
const path = require('path');
const gifFrames = require('gifframes');
const gify = require('gify');
const sharp = require('sharp');

// 分解GIF
gifFrames({
    source: 'input.gif'
}).on('data', function(frame) {
    // 对每一帧添加水印
    sharp(frame.image)
        .resize(400, 400) // 可选：调整图像大小
        .composite([{ input: 'watermark.png', gravity: 'southwest' }]) // 添加水印
        .toFile(`frame_${frame.index}.png`, function(err) {
            if (err) console.log(err);
        });
}).on('end', function() {
    // 合成GIF
    const frames = [];
    for (let i = 0; i < 5; i++) { // 假设有5帧
        frames.push(fs.readFileSync(path.join(__dirname, `frame_${i}.png`)));
    }

    const writer = new gify('output.gif', {
        width: 400,
        height: 400,
        quality: 10,
        repeat: -1,
        delay: 100 // 每帧显示时间，单位为毫秒
    });

    frames.forEach((frame, index) => {
        writer.write(frame, index);
    });

    writer.end();
});

解释

  • gifFrames: 用于从输入 GIF 文件中读取帧。
  • sharp: 用于图像处理，比如调整大小和添加水印。
  • gify: 用于将处理后的帧写入新的 GIF 文件。

通过以上代码，可以实现将原始 GIF 文件分解成帧，添加水印，并最终生成一个新的带有水印的 GIF 文件。

回到顶部