矢量化画布绘图答案

【问题标题】：Vectorize canvas drawing矢量化画布绘图
【发布时间】：2014-11-24 23:34:38
【问题描述】：

我正在使用 JavaScript 进行图像编辑。我必须使用不同的工具（矩形、画笔、魔杖...）创建蒙版并将其保存到数据库中。为避免发送所有像素坐标，我想对蒙版进行矢量化并仅发送顶点。如何从 CANVAS 上下文中获取该顶点？

【问题讨论】：

画布上下文不“记住”它在哪里绘制了任何东西，因此您无法查询上下文以获取先前绘制的顶点。您必须序列化您发出的所有绘图命令以创建最终绘图并将该序列化保存到您的数据库中。
我使用这里提出的边缘检测算法解决了它：stackoverflow.com/questions/24039599/…

【解决方案1】：

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

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

【讨论】：

顺便说一句，虽然 Canvas 最终会显示光栅图像（基本上是位图），但大多数在 Canvas 上绘制的命令都是矢量命令也是如此。序列化绘图命令通常会产生一个与 SVG 的 data 路径字符串非常相似的紧凑字符串。 ;-)
@markE，是的，其中许多可以按照建议存储在数据结构中，但您还需要跟踪笔何时向上/向下以及路径何时开始结束。
同意，要保存相同的绘图，您必须保存所有 Canvas 绘图命令。这可以像序列化一组行命令一样简单："m 10,50 l 20,20 30,50 150,200" 或者它可能是一个复杂的序列化，包括样式、转换和合成。干杯！