I found an old question with no answer, so i would like to ask it again.
I have an image about an A4 paper sketched by the user, taken with mobile camera.
Old forum post: forum.ionicframework.com
Im using OpenCV JS in browser (web application) and below is my code.
I could generate the Canny edges from the picture, but i have no idea how how do i recognize a (not regular) rectangle on the output, and get theis coordinates.
My final output should be 4 X and 4 Y coords what i save for later, and do the cropping after reviewing.
var src = cv.imread(srcImgEl); // load the image from <img> var dst = new cv.Mat(); cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0); cv.Canny(src, dst, 50, 100, 3, false); cv.threshold(dst, dst, 80, 255, cv.THRESH_BINARY_INV); cv.imshow('the-canvas', dst); // display the output to canvas src.delete(); // remember to free the memory dst.delete();