html - 如何保存画布绘图？

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 保存在数据库中。 文件