2

I want to detect rectangular cards(business cards) in JS. I found a similar implementation here-

Something similar to this link but in JavaScript- https://mathematica.stackexchange.com/questions/21059/how-can-i-detect-a-rectangular-region-of-interest-in-a-picture

I've made the image blur and detected the edges using JSfeat library. How should I find the rectangular shape in it using JS only. Also, I have read that hough transform in can help.

Any clue?

Swastik Shrivastava
  • 31
  • 5
  • Try using canvas - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API – OwChallie Aug 15 '17 at 21:22
  • 1
    don't just provide a link, explain your problem here. once the link is dead your question and any answers become useless. please read [ask] to learn how to write a good question here. your question will be downvoted and closed as is. – Piglet Aug 15 '17 at 21:24
  • I've made the image blur and detected the edges using canny edge detection. But don't know what to do next. – Swastik Shrivastava Aug 15 '17 at 21:51

1 Answers1

0

There are various ways to achieve that. Hough transform is one of them, you can use one of jsfeat's method (sadly, there is no documentation for it, but from what I can see it accepts the following arguments:

  • the image (in jsfeat's t_matrix format, it probably has to be grayscaled first)
  • rho resolution (bigger - more precise findings, slower)
  • theta resolution (bigger - more precise finding, slower)
  • threshold - how many points the line has to have to be included in the results

The method should return an array of arrays containing [rho, theta] pairs where theta is the angle of the line and rho is distance between the line and the 0 of the coordinate system; you need to experiment with the arguments (especially the threshold) and try to find a set of four lines that are most likely to form a rectangle (that may, but doesn't have to be skewed).

You should probably also read the wiki page on Hough transform to get a hold of how it works first.

If you only need to detect business cards that are paralel to the screen (I mean the horizontal edges are paralel to horizontal edges of the screen and same for vertical) it's probably much easier to calculate Scharr derivatives (jsfeat also has a method for that) and try to find two most significant vertical and horizontal edges (please do bear in mind that Scharr edges are negative when the color changes from dark to bright and positive the other way round, so you need to calculate absolute value to account for both cases).

Piotr Jaworski
  • 584
  • 1
  • 5
  • 20