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

Question

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

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

Answer 1

(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);
    }
  }
}