将画布动态保存到图像文件答案

【问题标题】：Save canvas to an image file dynamically将画布动态保存到图像文件
【发布时间】：2020-06-04 17:54:11
【问题描述】：

有没有办法在不显示提示的情况下将画布图像下载到文件夹？我找到了需要提示您命名文件的解决方案，但我没有找到任何可以动态命名图像并保存到本地文件的解决方案。我对前端开发非常陌生，所以我对 Node.js 或 JQuery/PHP/Ajax 并不完全熟悉。我找到了使用这些的解决方案，但它们最终仍然使用提示。

【问题讨论】：

前端的任何代码（在浏览器中运行）都无法保存任何文件。要对文件系统进行任何更改，您必须使用 PHP 或 Node.js 等服务器端后端代码。即使这样，您也只能影响运行后端代码的您自己的服务器上的文件系统。如果您想在前端触发下载，我相信您可以将客户端重定向到托管图像的 URL，但我认为这不是一个理想的解决方案。如果您提供更多详细信息来描述您的应用应该做什么，我或许可以提出解决方案。
@georgedum 谢谢，我有一个带有动态图像的画布游戏，我想每隔一秒左右下载一张画布图像。我的目标是使用图像来训练神经网络，但我被困在访问图像而无需不断单击“保存”
画布游戏是你做的吗？如果是这种情况，我认为您可以将画布的内容发送到后端并将图像保存在那里。如果这不是您的游戏，也许您可以截取您的游戏过程的视频，然后使用视频文件中的帧？
是的，我用原版 JS 制作了游戏。我还需要用图像文件输出画布上图像的坐标，所以不能录屏。要将内容发送到后端，我需要将我的 javascript 代码传输到 node.js 吗？
哦，太好了！你不需要移动所有的 js 代码。您只需设置一个带有路由的单独节点应用程序。（一个基本的网络服务器）在您的游戏代码中，您向您的节点应用程序发送一个请求，其中包含您需要的任何数据（图像、坐标等）然后您可以使用节点将该数据保存在数据库中或直接保存到您的文件中系统。这可能需要一些工作，但这是我要走的方向。

标签： javascript html download html5-canvas html5-img

【解决方案1】：

一般来说，这是一项安全功能。

您不希望您浏览的网站以静默方式将文件保存到您的计算机。例如，它们可能包含恶意代码，或覆盖现有文件。因此，作为一项安全功能，浏览器会要求您命名要保存的文件。

有一种方法可以命名文件，因此您无需向用户提供通用文件名。

关于如何做到这一点 - 这真的取决于你用什么来做到这一点..

在您的情况下 - 如果这些是您要保存的日志文件 - 您可以将它们发送回服务器。这很容易做到。

【讨论】：

有什么办法可以暂时绕过我的机器上的那个安全功能吗？我只需要将图像保存到我的特定机器上。
不是真的......有点没有意义。尝试将文件传输到服务器。