js 实现gif
使用 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：
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');性能优化建议
- 限制 GIF 尺寸（通常不超过 800px）
- 减少帧率（10-15fps 足够）
- 使用调色板优化颜色数量
- 对于长动画考虑分片加载
各方案选择取决于具体需求：简单生成选 gif.js，现有 GIF 操作选 libgif，复杂媒体处理选 FFmpeg。
