将 canvas 图像保存到磁盘

Question

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

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

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

谢谢。

Answer 1

您可以使用 dataUrl als url 创建一个 link 并像这样单击它：

<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>

Fiddle link: https://jsfiddle.net/Leelenaleee/b7xpta0e/5/

Answer 2

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

将 canvas 图像保存到磁盘

Save a canvas image to disk

html

javascript

canvas

html5-canvas