前言:项目中需要根据用户的选择,实时生成一张相关的GIF图片。便去寻找nodejs生成gif的插件,最初只找到了Python读取图片生成gif的文章,关于nodejs的还真是一篇没有找到(nodejs最多的是生成gif验证码?这里脑补黑人问号)。哪怕是我找到的这个插件,百度(google,bing)一下都是java,php使用的文章,并没有nodejs。所以就有了这篇文章。


1. 惯例,先放链接:

npm地址:https://www.npmjs.com/package/gifencoder

2. 相关插件

这里会用到之前说过的插件 canvas,如果没有看过可以先去瞅瞅。当然,直接看本篇文章也是可以的。

canvas插件:https://www.lingmx.com/archives/4/

3. 安装插件

// 安装 gifencoder
npm install gifencoder

4. 引入gifencoder

// 引入gifencoder
const GIFEncoder = require('gifencoder');

5. 使用

// 初始化gif encoder
const encoder = new GIFEncoder(200, 200); // 设置gif大小
encoder.createReadStream().pipe(fs.createWriteStream('./lmx.gif')); // gif保存位置及名称

encoder.start(); // 开始编辑gif
encoder.setRepeat(0); // 设置gif是否循环播放 0 循环, -1 不循环
encoder.setDelay(200); // 设置gif每帧间隔时间,单位ms
encoder.setQuality(10); // 设置gif质量
encoder.addFrame(); // 添加关键帧
 encoder.finish(); // 结束gif编辑

6. 一个简单的小例子

效果图

// 引入fs
const fs = require('fs');
// 引入canvas
const {
    createCanvas,
    loadImage
} = require('canvas');
// 引入gifencoder
const GIFEncoder = require('gifencoder');

// 初始化canvas
const canvas = createCanvas(200, 200); // 设置canvas大小
const ctx = canvas.getContext('2d');

// 初始化gif encoder
const encoder = new GIFEncoder(200, 200); // 设置gif大小
encoder.createReadStream().pipe(fs.createWriteStream('./lmx.gif')); // gif保存位置

encoder.start(); // 开始编辑gif
encoder.setRepeat(0); // 设置gif是否循环播放 0 循环, -1 不循环
encoder.setDelay(17); // 设置gif每帧间隔时间
encoder.setQuality(10); // 设置gif质量


let x = -190; // 设置初始位置x

// 使用Promise保证每帧都能插入到gif中
function drawCanvas() {
    return new Promise((resolve, reject) => {
        ctx.fillStyle = "#FFF";
        ctx.fillRect(0, 0, 750, 950)
        ctx.fillStyle = "#FFAAAA";
        ctx.font = '50px Microsoft YaHei';
        ctx.fillText('LingMX', x, 100);
        encoder.addFrame(ctx); // 将画布上的内容作为关键帧,添加到gif中
        resolve();
    })
}

function start() {
    drawCanvas().then(() => {
        x += 6; // 设置每帧向右移动的距离
        if (x < 190) { // 如果没有超出范围
            start(); // 重复执行
        } else { // 已超出范围
            encoder.finish(); // 结束gif编辑
        }
    })
}

start();

如果觉得这篇文章对你有用,可以留个好评呀(^▽^),也可以通过邮箱l@lingmx.com与我交流~

最后修改:2021 年 03 月 31 日 02 : 24 PM
如果觉得我的文章对你有用,请随意赞赏