将画布图像保存到磁盘答案

【问题标题】：Save a canvas image to disk将画布图像保存到磁盘
【发布时间】：2021-10-13 13:54:31
【问题描述】：

使用 js，我能够创建一个能够创建随机画布图像的小脚本。
要将它们转换为 png，我执行以下操作：

var dataURL = canvas.toDataURL("image/png");
window.open(canvas.toDataURL('image/png'));

这很适合在单独的浏览器选项卡中查看图像，但我希望在运行程序时将其保存到磁盘。这可能吗？

谢谢。

【问题讨论】：

你能把它保存在 cookie 或数据库中吗？我的意思是你需要的只是来自 dataURL 的字符串
不幸的是，我不会为此使用数据库，因为我的想法是保存图像然后将其上传到某处

标签： javascript html canvas html5-canvas

【解决方案1】：

我终于找到了解决办法！ Node 显然支持画布并允许通过 fs 将图像保存到文件系统。
见这里：https://www.youtube.com/watch?v=3c2EFpCr_vY

【讨论】：

【解决方案2】：

您可以使用 dataUrl als url 创建一个链接，然后像这样单击它：

<canvas id="canvas" width="600" height="400"></canvas>

<script>
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.rect(100, 100, 100, 100);
  ctx.fillStyle = 'pink'
  ctx.fill();

  function download() {
    var link = document.createElement('a');
    link.download = 'filename.png';
    link.href = document.getElementById('canvas').toDataURL('image/png')
    link.click();
  }

  download();

</script>

小提琴链接：https://jsfiddle.net/Leelenaleee/b7xpta0e/5/

【讨论】：

感谢您的回答。但是，当我运行它时，它会提示我下载图像，而我真正需要的是立即将其保存到磁盘中的文件夹中。这甚至可以用javascript吗？或者我是否需要在我的本地主机上使用 expressjs 服务器之类的东西来保存图像？
@Ress 除非用户明确声明权限（例如，下载时出现的弹出窗口），否则读取/写入本地计算机上的任何文件超出 JavaScript 的能力。 This is a good question 说明了 JavaScript 为何如此。
是的，想想如果你可以在 js 中修改用户的整个文件系统，那有多恶意。
@Stephen 听起来不错，我不知道我的预期。有没有办法解决？是否可以使用 expressjs 创建一个服务器，例如具有一个接收 base64 字符串和代码转换为图像并在本地保存的 post 端点？