我有一个项目的想法，但在开发过程中遇到了瓶颈。本质上，我想使用 JavaScript 来分析图像(任何图像)，采用特定颜色并将其作为路径映射到 HTML5 Canvas 上。所有分析的图像都将是不同颜色的基本形状。这是我希望它执行的示例。
此示例是我希望脚本在传递紫色十六进制引用时执行的操作。将蓝色传递给它会更改 Canvas 输出以仅显示 2 个蓝色形状。有没有人对不使用插件如何实现这一目标有任何想法？ Canvas 输出将在某个时候被操纵，因此每个形状都需要有自己单独的路径(因为它们并不总是 4 边形)。
最佳答案
由于目前这个问题相当广泛，我不会提供代码，而是提供实现此目标的一般方法。
这些是需要采取的步骤:
第一遍:根据颜色和公差缩小图像。如果颜色是绝对的，只需迭代并创建像素与颜色不匹配的 alpha channel 。对于公差，更好的方法是使用 RGB-HSL 转换，然后定义一个半径并检查读取的颜色是否在目标颜色的半径内。还要考虑 alpha channel 值。
这将留下一个带有 alpha channel 的图像，并且只有您想要的颜色。
第二遍:通过使用 Marching Squares 算法的解决方案运行图像(无耻的插件:我自己制作了 here (麻省理工学院许可)，受此问题的启发，而且它似乎比其他插件(包括 D3 插件)更快 - 但任何人都会这样做!)。通过遍历图像来提取路径，对于每次迭代删除跟踪的部分。您可以通过使用组合模式 destination-out 抚摸+填充获得的路径来完成此操作。根据您的场景使用大约 3-5 的线宽。
您可以使用 Ramer-Douglas-Peucker 来减少点数或保持原样。没有减少点将允许准确的路径，但也会表现更差。
第三遍:现在您有了可用于从原始图像裁剪部分的路径数据。添加所有路径数据(通过对每个路径使用 moveTo() 来使用子路径)，然后使用合成模式删除不需要的像素。或者，如果您只是追求路径:您就完成了!
关于javascript - 提取特定颜色的对象并转换为路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37183587/