html - 如何保存 Canvas 绘图？

Question

我有这个手指画应用程序，我希望我的用户可以保存他们画的东西并稍后回来继续画画。

执行此操作的更轻松的方法是什么？

Answer 1

您可以这样做的一种方法是:

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

当你想恢复 Canvas 时，你会创建一个图像，将 src 设置为之前存储在本地的值，然后在 Canvas 上绘制该图像。

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