问题

我在使用Node.js中的sharp库创建gif时遇到了困难。我能够成功创建我想要用于gif的帧图像，但无法将它们用于创建gif。我不确定sharp是否支持我想要做的事情，因为当将帧作为数组传递时，我得到了一个错误，我以为这是正确的做法？

// 将帧转换为GIF动画
const image = sharp([image1, image2], {
  animated: true,
})
  .gif({ loop: 0 })
  .toBuffer();

在执行node时出现错误：

/usr/local/bin/node ./server.js
Server running on port 3000
Process exited with code 1
Uncaught Error Error: Unsupported input '?PNG

IHDR ?? e???   pHYS 0 0 Q[Rk 0IDATXO0Q3LOOqu@M.60B000000 EOO
OZLAJ Q00!@(AJ Q00 !@(AJ 000 !@(A J 000 !@CAJ 000 !@CA

<details>
<summary>英文:</summary>

I am struggling to create a gif using the [sharp][1] library in nodejs. I am able to successfully create the frame-images that I want to use for the gif, but am not able to use them to create a gif. I am not sure if sharp even supports what I want to do, as I am getting an error when passing the frames as an array, which I thought was the right way to do this?

``` csharp
//Convert frames to GIF animation
const image = sharp([imagel, image2] {
  animated: true,
})
  .gif(f{ loop: 0 })
  .toBuffer();

Error on executing node:

/usr/local/bin/node ./server.js
Server running on port 3000
Process exited with code 1
Uncaught Error Error: Unsupported input '?PNG

IHDR ?? e???   pHYS 0 0 Q[Rk 0IDATXO0Q3LOOqu@M.60B000000 EOO
OZLAJ Q00!@(AJ Q00 !@(AJ 000 !@(A J 000 !@CAJ 000 !@CA

答案1

得分: 1

Unsupported input '?PNG 这可能意味着 PNG 格式不是 gif 函数 的有效输入。它可以用来将其他（已经）动画图像转换为动画 gif，但由于PNG不是动画格式，所以你会收到该错误。你可能需要使用 gifencoder + canvas (npm install gifencoder canvas) 来代替。类似于：

const fs = require('fs');
const path = require('path');
const Canvas = require('canvas');
const GIFEncoder = require('gifencoder');
const sharp = require('sharp');

// 为GIF定义输出路径。
const outputPath = 'animated.gif';

// 定义输入的PNG文件。
const inputFiles = ['image1.png', 'image2.png', 'image3.png'];

// 创建一个GIFEncoder实例。
const encoder = new GIFEncoder(500, 500); // 根据需要更改尺寸。
 
// 将编码器输出流传输到可写流。
const output = fs.createWriteStream(outputPath);
encoder.pipe(output);

// 开始编码。
encoder.start();

// 遍历输入文件。
inputFiles.forEach(async (file) => {
    // 使用sharp将每个PNG转换为原始的RGBA缓冲区。
    const data = await sharp(file).raw().toBuffer();

    // 创建一个新的Canvas实例。
    const canvas = Canvas.createCanvas(500, 500); // 根据需要更改尺寸。
    const ctx = canvas.getContext('2d');

    // 从原始RGBA缓冲区创建一个ImageData实例。
    const imageData = new Canvas.ImageData(
        new Uint8ClampedArray(data),
        canvas.width,
        canvas.height
    );

    // 将ImageData实例放入Canvas。
    ctx.putImageData(imageData, 0, 0);

    // 将帧添加到GIF中。
    encoder.addFrame(ctx);
});

// 完成编码。
encoder.finish();

这将读取每个PNG文件，使用sharp将其转换为原始的RGBA缓冲区，将图像数据放入Canvas，然后使用gifencoder将Canvas添加为GIF的帧。

const fs = require('fs');
const path = require('path');
const Canvas = require('canvas');
const GIFEncoder = require('gifencoder');
const sharp = require('sharp');

// Define the output path for the GIF.
const outputPath = 'animated.gif';

// Define the input PNG files.
const inputFiles = ['image1.png', 'image2.png', 'image3.png'];

// Create a GIFEncoder instance.
const encoder = new GIFEncoder(500, 500); // Change the dimensions as needed.

// Pipe the encoder output to a writable stream.
const output = fs.createWriteStream(outputPath);
encoder.pipe(output);

// Start encoding.
encoder.start();

// Loop through the input files.
inputFiles.forEach(async (file) => {
    // Convert each PNG to a raw RGBA buffer.
    const data = await sharp(file).raw().toBuffer();

    // Create a new Canvas instance.
    const canvas = Canvas.createCanvas(500, 500); // Change the dimensions as needed.
    const ctx = canvas.getContext('2d');

    // Create an ImageData instance from the raw RGBA buffer.
    const imageData = new Canvas.ImageData(
        new Uint8ClampedArray(data),
        canvas.width,
        canvas.height
    );

    // Put the ImageData instance into the canvas.
    ctx.putImageData(imageData, 0, 0);

    // Add the frame to the GIF.
    encoder.addFrame(ctx);
});

// Finish encoding.
encoder.finish();