CODEWITHSUNDEEP
javascriptimage-processinghtml5-canvas
Saurav Pradhan
Saurav Pradhan

Reputation: 115

Canvas : Find corners of a card in Image

My goal is to extract any card from an image..

Description:

I have the following image initially...

Original Image

Drew it on a canvas and applied canny edge detection and got this..

Image after Canny Edge Detection

The result I wish to get should be somethig similar to :

required output

To extract the card out of the image I need to find the corners of the card.

OR

Another way which I found on the internet is :

  1. Loop through all the edges and find the closed ones, then

  2. Find the largest closed edge and crop accordingly.

But I am getting clueless while trying to build any logic to implement any of the method.

Did this to get the edge detection, and am unable to proceed further :

var img = new Image();
img.src = "bcard.png";
img.onload = function() {
    var canv = document.getElementById("canv");
    var ctx = canv.getContext("2d");
    canv.height = img.height;
    canv.width = img.width;
    ctx.drawImage(img,0,0);
    window.canny = CannyJS.canny(canv); //included a js script to do canny edge detection
    canny.drawOn(canv);

}

Upvotes: 1

Views: 3111

Answers (1)

Jeru Luke
Jeru Luke

Reputation: 21203

First, I extracted the red channel from the image provided.

Red channel image:

enter image description here

Next I blurred it applying a Gaussian blur.

Blurred image:

enter image description here

Finally, I performed edge detection to obtain the following.

Final edge:

enter image description here

In order to crop the card perfectly you will have to find only ONE external contour. To do that you have dilate the resulting image

Dilated image:

enter image description here

Now you have to find contours. Find the external contours present. In this case, you will find only one contour. Draw a bounding rectangle around this contour.

enter image description here

Using the coordinates of the bounding rectangle, crop the image:

enter image description here

(I have the resulting script in python, but I see you have scripted the code in javascript)

Upvotes: 3

Related Questions