在NodeJs中从一组url图像创建一个动画Gif

Question

我有一组不同类型的图片url数组（png、jpg等），我想在nodeJS中使用它们来构建gif。由于我对这种语言非常陌生，所以我有些困难，请问有什么建议或想法吗？我查看了gifencoder，它提供了以下示例：

var GIFEncoder = require('gifencoder');
var encoder = new GIFEncoder(854, 480);
var pngFileStream = require('png-file-stream');
var fs = require('fs');
pngFileStream('test/**/frame?.png')
 .pipe(encoder.createWriteStream({ repeat: -1, delay: 500, quality: 10 }))
 .pipe(fs.createWriteStream('myanimated.gif'));

我理解到，您想要查找符合表达式的png文件。由于您有不同类型图像的url数组，您是否应该使用fs.createReadStream？感谢您的提问。

- P33pingtom

---

你喜欢使用模块还是纯Node.JS？ - MatejMecka

无论什么对我有效。 - P33pingtom

Answer 1

const GIFEncoder = require("gif-encoder-2");
const { createCanvas, Image } = require("canvas");
const { createWriteStream, readdir } = require("fs");
const { promisify } = require("util");
const path = require("path");
const fs = require("fs");

var outputDir = path.join(__dirname, "/output")


const createGif = async (fileName, frameURLs) => {
  return new Promise(async resolve1 => {
    try {
      // find the width and height of the image
      const [width, height] = await new Promise(resolve2 => {
        const image = new Image();
        image.onload = () => resolve2([image.width, image.height]);
        image.src = frameURLs[0];
      });

      // base GIF filepath on which algorithm is being used
      const dstPath = path.join(__dirname, "/output", `${fileName}.gif`);
      // create a write stream for GIF data
      const writeStream = createWriteStream(dstPath);
      // when stream closes GIF is created so resolve promise
      writeStream.on("close", () => {
        resolve1(dstPath);
      });

      // encode with the neuquant algorithm
      const encoder = new GIFEncoder(width, height, "neuquant");
      // pipe encoder's read stream to our write stream
      encoder.createReadStream().pipe(writeStream);
      encoder.start();
      encoder.setDelay(200);

      const canvas = createCanvas(width, height);
      const ctx = canvas.getContext("2d");

      // draw an image for each file and add frame to encoder
      const promisses = frames.map(frame => {
        return new Promise(resolve3 => {
          const image = new Image();
          image.onload = () => {
            ctx.drawImage(image, 0, 0);
            encoder.addFrame(ctx);
            resolve3();
          };
          image.src = frame; // set the frame url
        });
      });
      // run all the frame promisses
      await Promise.all(promisses);
      // close the writing stream
      writeStream.close();
    } catch (error) {
      console.error("error");
      console.error(error);
      throw error;
    }
  });
};

- TacoEater