javascript - 将画布图像保存到磁盘

Question

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

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

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

谢谢。

标签： javascripthtmlcanvashtml5-canvas

Answer 1

您可以使用 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/