Calling getCornerPoints throws an Uncaught (in promise) 23302432

YSternlicht commented 1 year ago

I am trying to get the cornerPoints from a scanned image to see how wide the pdf atcually is. However, when scanner.getCornerPoints(paperContour, image) the console will throw an ambigous error in the opencv.js file as follows uncaught (in promise) 23302432.

Below is a minimal example which shows this error (image with pdf not included)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
    <!-- warning: loading OpenCV can take some time. Load asynchronously -->
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
</head>
<body>
    <img src="pic.jpeg" id="image" />
    <script>
        window.addEventListener("load", () => {
            cv['onRuntimeInitialized'] = () => {
                const scanner = new jscanify();
                const image = document.getElementById("image");
                const paperContour = cv.imread(image);
                const resultCanvas = scanner.findPaperContour(paperContour);
                const {
                    topLeftCorner,
                    topRightCorner,
                    bottomLeftCorner,
                    bottomRightCorner,
                } = scanner.getCornerPoints(paperContour, image);
                console.log("topLeftCorner",topLeftCorner);
                console.log("topRightCorner",topRightCorner);
                console.log("bottomLeftCorner",bottomLeftCorner);
                console.log("bottomRightCorner",bottomRightCorner);
            }
        })
    </script>
</body>
</html>

ColonelParrot commented 1 year ago

Hello! It seems like you misassigned the paperContour variable. It should be:

const paperContour = scanner.findPaperContour(cv.imread(image));

getCornerPoints accepts a contour as the parameter. You're passing the parsed image, not the contour.

Your final code should be:

window.addEventListener("load", () => {
    cv['onRuntimeInitialized'] = () => {
        const scanner = new jscanify();
        const image = document.getElementById("image");
        const paperContour = scanner.findPaperContour(cv.imread(image));
        const {
            topLeftCorner,
            topRightCorner,
            bottomLeftCorner,
            bottomRightCorner,
        } = scanner.getCornerPoints(paperContour, image);
        console.log("topLeftCorner", topLeftCorner);
        console.log("topRightCorner", topRightCorner);
        console.log("bottomLeftCorner", bottomLeftCorner);
        console.log("bottomRightCorner", bottomRightCorner);
    }
})

Hope this helps!

YSternlicht commented 1 year ago

Sorry my bad. Works now. Thanks so much.

puffinsoft / jscanify

Calling getCornerPoints throws an Uncaught (in promise) 23302432 #6