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

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

要从画布中获取坐标(x, y) 像素的颜色分量，只需执行以下操作：

// assuming second canvas is same dimensions as first one
var secondCanvasId = context.createImageData(canvas.width, canvas.height);
for (var x = 0; x < canvas.width; x++) {
  for (var y = 0; y < canvas.height; y++) {
    var pix = context.getImageData(x, y, 1, 1).data;
    var r = pix[0];
    var g = pix[1];
    var b = pix[2];
    var a = pix[3];
    // set canvas2 (x, y) pixel with this color, if it matches the choosen color
    if (r === color.r && g === color.g && b === color.b && a === color.a) {
      secondCanvasId.data[0] = r;
      secondCanvasId.data[1] = g;
      secondCanvasId.data[2] = b;
      secondCanvasId.data[3] = a;
      context.putImageData(secondCanvasId, x, y);
    }
  }
}