在 Node.js 中制作 GIF 会导致图像损坏

Question

I am trying to make a basic gif. I based my code almost entirely on the sample in this NPM library . However, each time the GIF comes out as a broken image file.

CODE

const CanvasGifEncoder = require('canvas-gif-encoder');
const {createCanvas} = require('canvas');
const fs = require('fs');
const os = require('os');
const datauri = require('datauri');

exports.helloWorld = async (req, res) => {

  const canvas = createCanvas(120, 120);
  const ctx = canvas.getContext('2d');
  const encoder = new CanvasGifEncoder(120, 120);
  
  let stream = fs.createWriteStream(os.tmpdir() + "/output.gif");
  encoder.createReadStream().pipe(stream);
  
  encoder.begin();
  
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 120, 120);
  encoder.addFrame(ctx, 250);
  
  let colors = ['white', 'yellow', 'cyan', 'lime', 'magenta', 'red', 'blue'];
  
  for (let i = 0; i < colors.length; ++i) {
      ctx.fillStyle = colors[i];
      ctx.fillRect(i / colors.length * 120, 0, 120 / colors.length, 120);
      encoder.addFrame(ctx, 250);
  }
  
  encoder.end();

  const contentXX = await datauri(os.tmpdir() + '/output.gif');
  res.status(200).send('<img src="' + contentXX +'">');

};

RESULT

 <img src="data:image/gif;base64,R0lGODlheAB4AHAAACH/C05FVFNDQVBFMi4wAwEAAAA=">

EDIT

I have also tried using image-data-uri instead of datauri , who's library specifies compatibility with the GIF format. It yields the same results. For that you can try replacing the last two lines of the above code with:

const imageDataURI = require('image-data-uri');

imageDataURI.encodeFromFile(os.tmpdir() + '/output.gif').then(contentXX => res.status(200).send('<img src="' + contentXX +'">'));

Answer 1

The streaming is async, so when you call datauri immediately after encoder.end() it hasn't finished writing the file yet. Its only written a handful of bytes so thats all you get back in your base64 string.

Use the write stream's finish event to wait for the file to be written.

encoder.begin();

stream.on('finish', () => {
    const contentXX = await datauri(os.tmpdir() + '/output.gif');
    res.status(200).send('<img src="' + contentXX +'">');
})

ctx.fillStyle = 'black';
//...