如何保存画布绘图?

一种方法是:

通过调用 canvas.toDataURL() 并将编码的字符串存储在页面的 localStorage .

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

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

HTML保存按钮:

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

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

然后,您将不得不使用画布的drawImage与保存的图像。如何/在何处保存图像(服务器、下载文件夹)取决于您希望如何将其加载回。

你可以使用fabric js。它有一个方法可以帮助序列化为JSON,然后您可以将这个JSON保存在DB中。 documentation