eduardolundgren / tracking.js

A modern approach for Computer Vision on the web
http://trackingjs.com
Other
9.43k stars 1.44k forks source link

Rectangle detection. #259

Open boazgarty opened 6 years ago

boazgarty commented 6 years ago

Hi,

is it possible to do rectangle detection with the framework, is it something you think about? maybe implementation of hough transform.

Thanks!

dev-fJ-del commented 6 years ago

@eduardolundgren , What would be the best approach for doing document edge detection and perspective correction for js/cordova/hrml5?

murat-aka commented 6 years ago

@boazgarty

hough transform is used to find circles. if you are after edge detection you can use sobel function

  <div class="demo-frame">
    <div class="demo-container">
      < img id="image" width="250" height="250" src="assets/chess.png" /> 
      < canvas id="canvas" width="250" height="250"></canvas> 
    </div>
  </div>

  <script>

    window.onload = function() {
      var width = 225;
      var height = 225;
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = document.getElementById('image');

      var doFindFeatures = function() {

        context.drawImage(image, 0, 0, width, height);
        var imageData = context.getImageData(0, 0, width, height);

        var gray = tracking.Image.sobel(imageData.data, width, height);

        for (var i=0; i<gray.length; i++) {
          imageData.data[i] = gray[i];
        }        

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.putImageData(imageData, 0, 0);

      }

      doFindFeatures();

    }

  </script>

screenshot from 2017-12-16 22-04-29

pmulac commented 6 years ago

@murat-aka Thanks for your example. I'm trying to do something similar (identify a rectangle and extract it). After using the sobel filter, would you have any suggestions for how to (efficiently) detect whether the image contains a rectangle?

rtm commented 5 years ago

Instead of a chess board, which has well-defined areas of contrasting colors, the edge of a floor, where there is lots of "noise" that will give rise to many features which just approximate a straight line, from which we want to then derive the straight line, which as I understand it is the whole point of the Hough transform, or am I misunderstanding what Sobel does?

devakone commented 5 years ago

Anybody was successfully able to move this forward to extract the actual rectangle?

murat-aka commented 5 years ago

Hi to determine if there is a rectangle. You need to write your own algorithm.

Here some help

https://stackoverflow.com/questions/8512013/what-is-the-simplest-correct-method-to-detect-rectangles-in-an-image

devakone commented 5 years ago

To take this further, I was not able to do it with tracking.js, I had to go with OpenCV.js which is another beast.

jocca1985 commented 5 years ago

Can you maybe share the solution in OpenCV.js ?

TomerBrosh commented 5 years ago

bump