保存画布以备将来使用

Question

我对HTML5 / JS领域比较陌生。所以也许我想要做的很简单。

从用户的角度来看，我有以下要求：

用户在画布上绘制一些图形，然后离开页面。一旦他返回，应该恢复普遍的绘图，用户可以继续绘图。

到目前为止我所拥有的：

• 绘图部分本身
• 将画布保存为图像的可能性 - ＆GT;这不是suitalbe，因为它不再可编辑了......

所以我需要的是找到一种方法将当前绘图发送到后端，将其存储在那里，并在再次访问页面后重新加载并重新绘制它。如何将数据发送到后端以及如何检索它对我来说很清楚。所以主要问题是：

• 如何从画布中获取绘图？
• 如果图纸已经存在，如何重绘？

谢谢！

Answer 1

如果您不想使用后端服务器，则可以选择客户端存储。

使用context.getImageData获取a binary representation of the image content的结构，然后将其存储在localstorage localstorage.setItem("savedImage", imagedata)。

加载网站后，使用var imagedata = localstorage.getItem("savedImage")从localstorage加载图像数据，并将其放在画布上putImageData。当用户第一次访问网站或同时清除其本地存储时，imagedata将为null。

Answer 2

我认为你应该设置一个进行ajax调用的间隔（例如每5秒）并发送图形，所以即使与服务器的连接消失了，也有一个备图到图形。或者，更好的是，您可以使用localStorage保存绘图。我会使用localStorage，我觉得它更好。

为了获得绘图，您可以使用getImageData函数。你可以在这里阅读：http://www.w3schools.com/tags/canvas_getimagedata.asp。

为了重绘，当用户进入页面时，您可以使用putImageData函数。你可以在这里阅读：http://www.w3schools.com/tags/canvas_putImageData.asp。

另一种解决方案是使用toDataURL - 关于这种技术你可以在这里阅读： http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/ http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/