Javascript Canvas迭代地将图像自动保存到文件夹

Posted 2023-03-24

【中文标题】Javascript Canvas迭代地将图像自动保存到文件夹

【英文标题】：Javascript Canvas iteratively save image to folder automatically

【发布时间】：2022-01-15 15:12:56

【问题描述】：

我正在运行一些生成艺术功能来在 html/JS 画布中创建图像。我在一个循环中有一个变量，我想在函数中递增并多次重新生成图像，从而创建一系列逐渐变化的图像，我想将它们“缝合”在一起作为显示系统演变的视频。我不想使用下载链接或右键单击图像来保存它们。我想在我的电脑上指定一个文件夹位置，并让个人图像自动保存到该位置。这可能吗？

【参考方案1】：

对于问题的第一部分，您可以使用浏览器的 MediaStream Recording API 的 MediaRecorder 接口捕获在画布元素中创建的动画。 MDN 有一些关于如何在此处设置的详细信息：https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

您问题的第二部分更难 - 出于安全原因，浏览器从用户的设备被沙盒化。有新的文件系统访问 API - as described in this WebDev article - 但我从未使用过它，所以不能说它对您的用例有多大用处。

或者，您可以将视频或图像快照发送到远程文件存储设施并从那里下载。

【参考方案2】：

如果这是您自己的一次性网站而不是公共网站，您可以使用node-canvas，并拥有完整的文件系统访问权限。然后您可以使用 ffmpeg 将帧拼接在一起：

ffmpeg -framerate 30 -i /path/to/folder/fileName.%02d.png

如果您的图像标记为 10-99，请使用 %02d，使用 %03d 标记 100-999 等。