Build Mobile Document Scanner by OpenCV.js

asked 2018-10-03 08:41:48 -0500

nphoanh gravatar image

Hello, I'm a newbie in OpenCV and I'm using OpenCV.js for my app.

I'm going to build a scanner app to take picture, auto detect document and crop it.

I'm following the tutorial of this page, which use Python to build app. In step 2 and 3, I do not know how to convert it into js for my app, can anybody help me please?

Thank you so much.

edit retag flag offensive close merge delete


show, what you have so far, please

also, please take a look at the js tutorials (e.g. finding contours is covered there !)

berak gravatar imageberak ( 2018-10-03 08:42:49 -0500 )edit

Thanks for replying me!

This is my code:

    let src = cv.imread('imageSrc');
    let dst = new cv.Mat();
    let origin = src.clone();
    cv.cvtColor(src, dst, cv.COLOR_RGB2GRAY);
    let ksize = new cv.Size(5, 5);
    cv.GaussianBlur(dst, dst, ksize, 0, 0, cv.BORDER_DEFAULT);
    cv.Canny(dst, dst, 50, 100, 3, true);
    let contours = new cv.MatVector();
    let hierarchy = new cv.Mat();
    cv.findContours(dst, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);
    cv.imshow('canvasOutput', dst);

I'm stuck in the step how to get 4 edges to draw contour and how to crop this contour.

I have already read the js tutorials but for me it is still too hard to understand all.

nphoanh gravatar imagenphoanh ( 2018-10-03 09:35:53 -0500 )edit