Javascript 矢量化画布绘制

我在用JavaScript编写图像版。我必须用不同的工具（矩形、画笔、魔杖等）创建蒙版，并将其保存到数据库中。为了避免发送所有像素坐标，我想对遮罩进行矢量化，只发送顶点。

---

如何从画布上下文中获取该顶点？

画布是光栅曲面。如果将其视为向量曲面，则需要记录在单独数据结构中应用的所有操作，并将其发送到服务器

---

您可能会发现，在您的情况下，使用SVG比使用画布更有意义。

顺便说一句，虽然画布最终会显示光栅图像（基本上是位图），但在画布上绘制的大多数画布命令都是矢量命令，这也是事实。序列化绘图命令通常会产生一个紧凑的字符串，非常类似于SVG的

data

path字符串@markE，是的，它们中的许多可以按照建议存储在数据结构中，不过您还需要跟踪画笔何时上下以及路径何时开始结束。同意，要保存相同的图形，必须保存所有画布绘制命令。这可以像序列化一组行命令一样简单：

“m 10,50 l 20,20 30,50 150200”

，也可以是一个复杂的序列化，包括样式、转换和合成。干杯画布上下文不“记住”它在何处绘制了任何内容，因此您无法查询先前绘制的顶点的上下文。您必须序列化为创建最终图形而发出的所有图形命令，并将该序列化保存到数据库中。我使用此处提出的边缘检测算法解决了此问题：