【亲测免费】 jsgif: 在浏览器中生成和播放GIF动画的JavaScript库

2026-01-14 17:55:43作者：齐添朝

是一个轻量级、易于使用的JavaScript库，用于在浏览器中生成和播放GIF动画。它提供了简单易懂的API，让你可以轻松地将动态效果添加到Web应用或网站中。

功能介绍

jsgif 支持以下主要功能：

创建 GIF 动画
播放 GIF 动画
控制 GIF 动画的速度和循环次数
导出和导入 GIF 数据
调整 GIF 的质量和尺寸

应用场景

有了 jsgif，你可以实现以下应用场景：

在网页上展示实时数据变化，如图表或计数器。
制作交互式的教程或游戏。
在 Web 应用中创建可配置的动态头像或表情包。
为社交媒体分享按钮添加动态效果。

特点

以下是 jsgif 的主要特点：

轻量级：jsgif 的库文件大小仅为几 KB，加载速度快，对页面性能影响小。
兼容性好：支持所有主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。
易于集成：提供简洁的 API 设计，无需深入了解 GIF 编码原理即可快速上手。
高度定制化：允许自定义 GIF 的帧速率、循环次数、质量等参数，满足不同需求。
开源免费：jsgif 是一个完全开放源代码的项目，基于 MIT 许可证发布。

示例代码

下面是一个简单的示例，演示如何使用 jsgif 在网页上创建并显示一个 GIF 动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsgif 示例</title>

    <!-- 引入 jsgif 库 -->
    <script src="https://cdn.jsdelivr.net/npm/@shachaf/jsgif@latest/dist/jsgif.min.js"></script>
</head>
<body>
    <canvas id="gif-canvas" width="300" height="300"></canvas>

    <script>
        // 创建 GIF 对象
        const gif = new GIF();

        // 添加 6 帧图像（可替换为你自己的图片）
        for (let i = 0; i < 6; i++) {
            const img = new Image();
            img.src = `https://example.com/image-${i}.png`;
            gif.addFrame(img, {delay: 100});
        }

        // 设置 GIF 参数
        gif.setRepeat(0); // 无限循环
        gif.setQuality(10); // 设置质量（1-10）

        // 绘制到 canvas 上
        const canvas = document.getElementById('gif-canvas');
        const ctx = canvas.getContext('2d');
        gif.render(ctx);

        // 下载 GIF 文件
        setTimeout(() => {
            const link = document.createElement('a');
            link.href = gif.getDataUrl();
            link.download = 'example.gif';
            link.click();
        }, 1000);
    </script>
</body>
</html>