reactjs - React JS - 将 Canvas 动画保存为 gif

Question

我有一个 React 项目，它从 python 后端提供数据以在 Canvas 上绘制。我在动画开始之前加载所有后端数据，但由于数据量很大，因此仍然需要一些时间来制作动画(大约 60 帧需要 20-30 秒)。我正在使用 requestAnimationFrame 按顺序在 Canvas 上绘制。 我想知道是否有一种方法可以将数据保存在 React 的 Canvas 上，并能够将其下载为电影或 gif。我从来没有做过任何可以在 React 中下载的东西，更不用说动画了。我还希望这不会花费太长的时间，因为我必须将大量补丁数据渲染到 Canvas 上。 原生 JavaScript 中似乎有一些方法可以捕获 Canvas ，与 MediaRecorder API 一起使用时可以保存数据。此外，还有其他库(例如 CCapture)可以保存此数据，但它们似乎都是在 native JavaScript 中。 有没有办法有效地获取这些数据并能够下载它，如果可以的话如何？

Answer 1

我没有成功将动画 Canvas 保存为 gif但我设法将其另存为 webm .
起初我尝试使用 CCapture 库。我添加了<script>标记为index.html
<script src="dist/CCapture.all.min.js"></script>
然后我添加了save我的组件的函数

const capturer = new window.CCapture({ format: "webm", framerate: 60, quality: 90 });
const canvas = document.getElementsByTagName("canvas")[0];
function render() {
    capturer.capture(canvas);
    requestAnimationFrame(render);
}
setTimeout(() => {
    capturer.stop();
    capturer.save();
}, 5000);
render();
capturer.start();

但是我得到的视频速度非常快，卡住并且帧率奇怪。
然后我尝试了this answer它工作得很好。视频流畅且质量正常。