当前位置：首页 > JavaScript

js 实现gif

2026-03-15 02:59:18JavaScript

使用 Canvas 和 gif.js 生成 GIF

在 JavaScript 中生成 GIF 可以通过 gif.js 库实现，该库利用 Canvas 捕获帧并编码为 GIF 动画。

安装依赖：

npm install gif.js

示例代码：

import GIF from 'gif.js';

// 创建 GIF 实例
const gif = new GIF({
  workers: 2,
  quality: 10,
  width: 200,
  height: 200
});

// 添加 Canvas 帧
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;

// 绘制第一帧（红色）
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200);
gif.addFrame(canvas, {delay: 500});

// 绘制第二帧（蓝色）
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 200, 200);
gif.addFrame(canvas, {delay: 500});

// 生成 GIF
gif.on('finished', function(blob) {
  const url = URL.createObjectURL(blob);
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
});

gif.render();

使用 libgif 处理现有 GIF

如需操作已有 GIF 文件（如播放控制），可使用 libgif：

<script src="https://cdnjs.cloudflare.com/ajax/libs/libgif-js/1.0.3/libgif.min.js"></script>
<div class="jsgif"></div>

<script>
  const gif = new SuperGif({
    gif: document.querySelector('.jsgif'),
    auto_play: false
  });
  gif.load(() => {
    console.log('GIF 帧数:', gif.get_length());
    gif.play();
  });
</script>

通过 FFmpeg.wasm 转换视频为 GIF

对于高级需求（如视频转 GIF），可使用 FFmpeg.wasm：

js 实现gif

import { createFFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();

// 将 MP4 转换为 GIF
ffmpeg.FS('writeFile', 'input.mp4', videoData);
await ffmpeg.run('-i', 'input.mp4', '-vf', 'fps=10,scale=320:-1', 'output.gif');
const gifData = ffmpeg.FS('readFile', 'output.gif');