当前位置：首页 > JavaScript

js 实现gif

2026-02-02 03:27:06JavaScript

使用 JavaScript 生成 GIF

在 JavaScript 中生成 GIF 可以通过多种方式实现，以下是几种常见的方法：

使用 gif.js 库

gif.js 是一个流行的 JavaScript 库，用于在浏览器中生成 GIF 动画。它支持 Web Workers，可以在后台线程中处理 GIF 生成，避免阻塞主线程。

安装 gif.js：

npm install gif.js

基本用法示例：

import GIF from 'gif.js';

const gif = new GIF({
  workers: 2,
  quality: 10,
  width: 200,
  height: 200
});

// 添加帧
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200);
gif.addFrame(canvas, {delay: 100});

// 渲染 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();

使用 CCapture.js 库

CCapture.js 是一个用于捕获 Canvas 动画并导出为 GIF 或视频的库。

js 实现gif

基本用法：

import CCapture from 'ccapture.js';

const capturer = new CCapture({
  format: 'gif',
  workersPath: 'path/to/workers/',
  framerate: 60,
  quality: 90
});

// 开始捕获
capturer.start();

// 在动画循环中捕获帧
function animate() {
  requestAnimationFrame(animate);
  // 绘制动画...
  capturer.capture(canvas);
}

// 停止捕获并生成 GIF
function stopCapture() {
  capturer.stop();
  capturer.save();
}

使用 canvas 和 gifencoder

对于 Node.js 环境，可以使用 gifencoder 和 canvas 库生成 GIF。

安装依赖：

js 实现gif

npm install canvas gifencoder

示例代码：

const { createCanvas } = require('canvas');
const GIFEncoder = require('gifencoder');

const encoder = new GIFEncoder(200, 200);
encoder.createReadStream().pipe(require('fs').createWriteStream('output.gif'));

encoder.start();
encoder.setRepeat(0); // 0 表示无限循环
encoder.setDelay(100); // 帧延迟（毫秒）
encoder.setQuality(10); // 图像质量

const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');

// 添加帧
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200);
encoder.addFrame(ctx);

ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 200, 200);
encoder.addFrame(ctx);

encoder.finish();

使用 FFmpeg.js

FFmpeg.js 是 FFmpeg 的 JavaScript 版本，可以用于处理视频和 GIF。

基本用法：

const ffmpeg = require('ffmpeg.js');

// 将一系列图像转换为 GIF
const result = ffmpeg({
  MEMFS: [{name: 'frame1.png', data: frame1Data}, {name: 'frame2.png', data: frame2Data}],
  arguments: ['-i', 'frame%d.png', '-f', 'gif', 'output.gif']
});

const out = result.MEMFS[0];
const url = URL.createObjectURL(new Blob([out.data], {type: 'image/gif'}));