使用 GridJS 检测图像角点

2015-05-19 09:47:48 +08:00
 sneezry

今天为大家带来的Demo不仅仅是图像滤镜处理,让我们来点和计算机视觉有关的,这也是我写GridJS的最初目的。

还不知道GridJS是什么的小伙伴们请看这里:http://v2ex.com/t/191612

原图:

检测角点结果(下面的图需要大家仔细看看,红点不是很明显,因为我偷懒只标了一个像素的尺寸):

代码:

var canvas = document.getElementById('workplace');

gridjs.open('cube.jpg', function(im) {
  var H, corners, i;

  im.grayscale();
  H = harris(im.pixel.G);
  corners = getHarrisPoint(H, 0.015, 10);
  im.rgba();

  for (i = 0; i < corners.length; i++) {
    im.pixel.r[corners[i].y][corners[i].x] = 255;
    im.pixel.g[corners[i].y][corners[i].x] = 0;
    im.pixel.b[corners[i].y][corners[i].x] = 0;
  }

  im.update().show(canvas);
});

function harris(srcArray) {
  var imx, imy, wxx, wyy, wxy, wdet, wtr, H,
      g = gridjs;

      imx = g.gauss(srcArray, 5, 1, 0);
      imy = g.gauss(srcArray, 5, 1, 1);

      wxx = g.gauss(g.square(imx), 5);
      wyy = g.gauss(g.square(imy), 5);
      wxy = g.gauss(g.mul(imx, imy), 5);

      wdet = g.minus(g.mul(wxx, wyy), g.square(wxy));
      wtr = g.add(wxx, wyy);

      H = g.div(wdet, wtr, 0);

      g.norm(H);

      return H;
}

function getHarrisPoint(harrisArray, threshold, minDistance) {
  var x, y, i, j, distance2,
      minDistance2 = minDistance * minDistance,
      index = 0,
      width = harrisArray[0].length,
      height = harrisArray.length,
      points = [];

  for (y = 0; y < height; y++) {
    for (x = 0; x < width; x++) {
      if (harrisArray[y][x] >= threshold) {
        points[index++] = {
          'x' : x,
          'y' : y,
          'h' : harrisArray[y][x]
        }
      }
    }
  }

  points.sort(function(a, b) {
    return b.h - a.h;
  });

  for (i = 0; i < points.length; i++) {
    for (j = 0; j < i; j++) {
      distance2 = (points[i].x - points[j].x) * (points[i].x - points[j].x) +
                  (points[i].y - points[j].y) * (points[i].y - points[j].y);

      if (distance2 < minDistance2) {
        points.splice(i, 1);
        i--;
        break;
      }
    }
  }

  return points;
}
2450 次点击
所在节点    JavaScript
2 条回复
turing
2015-05-19 12:32:32 +08:00
Cool
jimmy66
2015-05-19 23:51:08 +08:00
点赞~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/192110

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX