Detect paper in image using Javascript

dmikester1 · March 26, 2021, 4:43pm

We have a web application I built for our company on React and NodeJS all in Javascript/CSS/HTML. We want to add a feature for the user to capture an image of a label with the ipad they are using. So I am looking for a library or just sample code in Javascript to identify and capture an image of a paper label. From my research, OpenCV seems to be the best route to go for this task.

berak · March 26, 2021, 7:10pm

show us, what you tried, so far, please.

Alejandro_Silvestri · March 28, 2021, 2:29am

@dmikester1

I recommend starting with QR codes.

This link tells me QRCodeDetector is available in OpenCV.JS (I didn’t try this):

github.com

opencv/opencv/blob/35eaacd1db1ebd264218dd8f8bd34a364ecb11a7/platforms/js/opencv_js.config.py#L46


        'applyImage',
        'applyImageFeatures',
        'buildMap',
        'getContour'
    ],
}

objdetect = {'': ['groupRectangles'],
             'HOGDescriptor': ['load', 'HOGDescriptor', 'getDefaultPeopleDetector', 'getDaimlerPeopleDetector', 'setSVMDetector', 'detectMultiScale'],
             'CascadeClassifier': ['load', 'detectMultiScale2', 'CascadeClassifier', 'detectMultiScale3', 'empty', 'detectMultiScale'],
             'QRCodeDetector': ['QRCodeDetector', 'decode', 'decodeCurved', 'detect', 'detectAndDecode', 'detectMulti', 'setEpsX', 'setEpsY']}

video = {'': ['CamShift', 'calcOpticalFlowFarneback', 'calcOpticalFlowPyrLK', 'createBackgroundSubtractorMOG2', \
             'findTransformECC', 'meanShift'],
         'BackgroundSubtractorMOG2': ['BackgroundSubtractorMOG2', 'apply'],
         'BackgroundSubtractor': ['apply', 'getBackgroundImage']}

dnn = {'dnn_Net': ['setInput', 'forward'],
       '': ['readNetFromCaffe', 'readNetFromTensorflow', 'readNetFromTorch', 'readNetFromDarknet',
            'readNetFromONNX', 'readNet', 'blobFromImage']}

QRCodeDetector documentation is here:
https://docs.opencv.org/master/de/dc3/classcv_1_1QRCodeDetector.html

detect will give you the position of the QR marker on the image. decode as second step will return de string encoded in QR. detectAndDecode do both thing in one command.

Topic		Replies	Views
Detecting a smartphone screen javascript , opencvjs , objectdetection	2	1593	December 22, 2021
Detect the grid of a graph paper C++	4	876	October 9, 2022
How to detect folded paper using opencv-python?	1	1313	May 17, 2021
Simple object recognition in webcam stream	1	126	December 20, 2023
Best way to check objects on images? Python matchtemplate , imgproc , objdetect	7	822	February 17, 2021

Detect paper in image using Javascript

Related Topics