提取特定颜色的对象并转换为路径

Question

我有一个项目的想法，但我已经开发了它的发展。基本上我想使用JavaScript来分析图像（任何图像），获取特定颜色并将其作为路径映射到HTML5画布上。所有分析的图像都是不同颜色的基本形状。这是我希望它做的一个例子。

这个例子是我希望脚本在传递紫色十六进制引用时要做的。将它传递给蓝色会改变画布输出，只显示2个蓝色形状。有没有人对如何实现而不使用插件有任何想法？画布输出在某些时候会被操纵，因此每个形状都需要是它自己独立的路径（因为它们不会总是4面形状）。

Answer 1

由于问题非常广泛，我不会提供代码，而是提供如何实现这一目标的一般方法。

这些是需要采取的步骤：

第一遍：根据颜色和容差缩小图像。如果颜色是绝对的，只需迭代并创建像素与颜色不匹配的alpha通道。对于公差，更好的方法是使用RGB-HSL转换，然后定义半径并检查颜色读取是否在目标颜色的半径范围内。还要考虑alpha通道值。

这将留下带有Alpha通道的图像，只留下您所追求的颜色。

第二遍：使用Marching Squares算法通过解决方案运行图像（无耻插件：我自己创建了 here （MIT许可证）问题，它似乎比其他人包括D3插件更快 - 但任何人都会这样做！）。通过迭代图像来提取路径，每次迭代都会删除跟踪的部分。您可以通过使用合成模式destination-out描边+填充获取的路径来完成此操作。使用特定于您的方案的约3-5的线宽。

你可以使用Ramer-Douglas-Peucker减少积分或保持原样。没有减少点数将允许准确的路径，但也会表现更差。

第三遍：现在您可以使用路径数据剪切原始图像中的部分。添加所有路径数据（通过对每个路径使用moveTo（）使用子路径），然后使用合成模式删除您不想要的像素。或者，如果你只是在路径之后：你已经完成了！

Answer 2

要从画布中获取坐标start: function(event, ui) { if(tempWidth < $(this).width()){ $(this).addClass("moveable"); } tempWidth = $(this).width(); }, stop: function(event, ui) { $(this).removeClass("moveable"); } 像素的颜色分量，只需执行以下操作：

(x, y)