如何在Node.js中使用Canvas加载并返回GIF格式图片？

问题原因 #

• 你未将加载完成的GIF图像绘制到Canvas上下文中，当前画布为空，输出的GIF无有效内容
• 若你需要输出多帧动画GIF，canvas.toBuffer的image/gif模式仅支持输出单帧静态GIF，无法直接生成多帧动画
• image/gif格式不支持quality参数，该参数仅对JPEG格式生效

修复方案 #

情况1：仅需输出单帧静态GIF #

只需要在拿到加载好的图像后，先将其绘制到画布上再生成buffer即可，修复后代码如下：

app.get('/media', function(req, res) {
    const { createCanvas, loadImage } = require('canvas')
    const canvas = createCanvas(600, 400)
    const ctx = canvas.getContext('2d')

    const gifPath = loadImage('https://www.hubspot.com/hubfs/Smiling%20Leo%20Perfect%20GIF.gif')

    gifPath.then((image) => { 
        // 新增：将加载的GIF第一帧绘制到画布上
        ctx.drawImage(image, 0, 0, 600, 400)
        canvas.toBuffer((err2, buf) => {
            if (err2) {
                console.log("To Buffer Error>>>>>>>", err2)
                res.status(500).end()
                return
            }
            res.writeHead(200, {'Content-Type': 'image/gif'});
            res.end(buf, 'binary');
        }, 'image/gif')
    }).catch(err => {
        console.log('oh no!', err)
        res.status(500).end()
    })
})

情况2：需要输出多帧动画GIF #

需要使用canvas内置的giflib对应API逐帧编码生成动画，示例代码如下：

app.get('/media', async function(req, res) {
    const { createCanvas, loadImage, GIFEncoder } = require('canvas')
    const canvas = createCanvas(600, 400)
    const ctx = canvas.getContext('2d')
    
    // 初始化GIF编码器
    const encoder = new GIFEncoder(600, 400)
    encoder.createReadStream().pipe(res)
    encoder.start()
    encoder.setRepeat(0) // 0=无限循环
    encoder.setDelay(100) // 每帧间隔100ms
    encoder.setQuality(10) // 数值越低质量越高

    // 这里可以循环加载/绘制多帧内容，示例绘制3帧不同位置的GIF帧
    const gifImage = await loadImage('https://www.hubspot.com/hubfs/Smiling%20Leo%20Perfect%20GIF.gif')
    for (let i = 0; i < 3; i++) {
        ctx.clearRect(0, 0, 600, 400)
        ctx.drawImage(gifImage, i * 50, 0, 200, 200)
        encoder.addFrame(ctx)
    }
    encoder.finish()
    res.writeHead(200, {'Content-Type': 'image/gif'})
})

额外排查项 #

• 如果修改代码后仍有问题，可执行npm rebuild canvas重新编译canvas，确保系统安装的giflib被正确识别
• 加载网络GIF图片时确保资源可正常访问，无访问权限限制

内容的提问来源于stack exchange，提问作者Anirudh