使用Javascript或ajax保存并自动下载Canvas绘图

Question

我有一个画布图，我想在单击按钮时自动保存和下载。我想在javascript或ajax中实现它，只要保存的数据会自动下载。我不需要将它保存到服务器......

  var canvas = document.getElementsByClassName('whiteboard')[0];

<canvas id='canvas' ></canvas>
<button id="scan" />Save</button>

谢谢

Answer 1

我猜你根本不需要保存，只是在点击按钮时将你的绘图下载到画布上作为图像？

关于这个主题有一些很好的文章，但这里有你想要做的实际例子（如果我的猜测是真的）：Save canvas as image

所以基本上你在你的锚标签上添加了click事件监听器，画布图像数据uri作为href属性

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);