制作一个保存绘图的 HTML 绘图应用程序

Question

我有一个想要制作的程序的概念。我想制作某种绘图程序，允许您在页面上绘制线条，保存它，然后当另一个用户查看同一页面时，他可以看到第一个用户制作的绘图并对其进行编辑。这将全部在线，大概使用 HTML5 画布。

我想我可以弄清楚绘图部分：当用户的鼠标被点击时，程序本质上会填充一系列跟踪鼠标移动的圆圈。但是，我很难弄清楚如何保留这些图纸。我现在能想到的最佳解决方案是拍摄图纸的“快照”并以某种格式保存，但随着图纸变大，这意味着有一个巨大的文件被保存并从服务器发送到客户端，这听起来很不理想。

有人可以提供有关如何以有效方式持久保存这些图纸的建议吗？

Answer 1

HTML5 像素数据可以轻松导出和导入为 PNG 图像。像素数据大小仅取决于尺寸，而不是应用了多少绘图命令，因为它是基于位图缓冲区的，而不是基于矢量的。

使用 toDataURL() 导出：

Capture HTML Canvas as gif/jpg/png/pdf?

将数据保存到服务器。

导入现有图像，只需将其加载为<img> 并使用drawImage() 在<canvas> 上绘制图像。