如何保存画布图？

Question

我有这个手指绘画应用程序，我希望我的用户可以保存他们绘制的内容并稍后返回并继续绘图。

这样做的轻松方法是什么？

Answer 1

你可以这样做的一种方法是：

通过调用canvas.toDataURL()将画布内容保存为base64编码的PNG图像，并将编码的字符串存储在页面的localStorage中。

当您想要恢复画布时，您将创建一个图像，将src设置为先前存储在本地的值，然后在画布上绘制该图像。

还有其他方法，例如记录所有绘图操作，将它们存储在本地或服务器会话中，并在下次访问页面时“重播”它们。

Answer 2

HTML保存按钮：

  <input type="button" id="save" value="Save to PNG"> 

然后脚本：

  document.getElementById('save').onclick = function () {
    window.location = document.getElementById("canvas").toDataURL('image/png');
  };

然后你必须使用Canvases的drawImage和保存的图像。保存图像的方式/位置（服务器，下载文件夹）取决于您希望如何加载图像。

Answer 3

你可以使用面料js。它有帮助序列化为JSON的方法，然后您可以将此JSON保存在DB中。 documentation