React JS - 将画布动画保存为 gif答案

【问题标题】：React JS - Save canvas animation as gifReact JS - 将画布动画保存为 gif
【发布时间】：2021-06-24 21:21:10
【问题描述】：

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

【问题讨论】：

您可以从画布中获取图像数据。我想你可以以某种方式将帧堆叠在一起并将其转换为 gif。

标签： reactjs canvas saving-data

【解决方案1】：

我没有成功将动画画布保存为gif，但我设法将其保存为webm。
起初我尝试使用 CCapture 库。我在index.html
<script src="dist/CCapture.all.min.js"></script>
中添加了一个<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，效果很好。视频流畅且质量正常。

【讨论】：