OpenCV. js, чтобы обнаружить прямоугольную angular форму на изображении и вырезать ее

Question

Я не вижу выходных данных, а также без ошибок .... Я пытаюсь определить прямоугольную форму на изображении, вырезать ее и сохранить с помощью opencv. js

  onFilePicked() {
        let imgElement = document.getElementById('imageSrc');
        const files = event.target.files;
        imgElement.src = URL.createObjectURL(files[0]);
        var app = this
        imgElement.onload = function () {
            let mat = cv.imread(imgElement)
            let dst = new cv.Mat();

            cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY);
            // gray = cv.bilateralFilter(gray, 11, 17, 17)
            cv.Canny(mat, dst, 30, 200, 3, false);

            let contours = new cv.MatVector();
            let hierarchy = new cv.Mat();

            var transformed = null

            cv.findContours(dst, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE)
            var sortableContours = []
            for (let i = 0; i < contours.size(); i++) {
                let cnt = contours.get(i);
                let area = cv.contourArea(cnt, false);
                let perim = cv.arcLength(cnt, false);

                sortableContours.push({
                    areaSize: area,
                    perimiterSize: perim,
                    contour: cnt
                });
                let color = new cv.Scalar(255, 0, 0, 255);
                let hierarchy2 = new cv.Mat();
                cv.drawContours(mat, contours, -1, (0, 255, 0), 3);
            }
            cv.imshow('canvasOutput', mat);

            let foundContour = null;
            for (let sortableContour of sortableContours) {
                let peri = cv.arcLength(sortableContour.contour, true);
                let approx = new cv.Mat();

                cv.approxPolyDP(sortableContour.contour, approx, 0.1 * peri, true);

                if (approx.rows == 4) {

                    foundContour = approx
                    transformed = app.perspective_transform(mat, foundContour)

                    break;
                } else {
                    approx.delete();
                }

            }

            let rotate = app.rotate_image(transformed, 90)

            cv.imshow('canvasOutput', rotate)


        };

    },

преобразование

  perspective_transform(image, foundContour) {

        let corner1 = new cv.Point(foundContour.data32S[0], foundContour.data32S[1]);
        let corner2 = new cv.Point(foundContour.data32S[2], foundContour.data32S[3]);
        let corner3 = new cv.Point(foundContour.data32S[4], foundContour.data32S[5]);
        let corner4 = new cv.Point(foundContour.data32S[6], foundContour.data32S[7]);

        //Order the corners
        let cornerArray = [{
            corner: corner1
        }, {
            corner: corner2
        }, {
            corner: corner3
        }, {
            corner: corner4
        }];
        //Sort by Y position (to get top-down)
        cornerArray.sort((item1, item2) => {
            return (item1.corner.y < item2.corner.y) ? -1 : (item1.corner.y > item2.corner.y) ? 1 : 0;
        }).slice(0, 5);

        //Determine left/right based on x position of top and bottom 2
        let tl = cornerArray[0].corner.x < cornerArray[1].corner.x ? cornerArray[0] : cornerArray[1];
        let tr = cornerArray[0].corner.x > cornerArray[1].corner.x ? cornerArray[0] : cornerArray[1];
        let bl = cornerArray[2].corner.x < cornerArray[3].corner.x ? cornerArray[2] : cornerArray[3];
        let br = cornerArray[2].corner.x > cornerArray[3].corner.x ? cornerArray[2] : cornerArray[3];

        //Calculate the max width/height
        let widthBottom = Math.hypot(br.corner.x - bl.corner.x, br.corner.y - bl.corner.y);
        let widthTop = Math.hypot(tr.corner.x - tl.corner.x, tr.corner.y - tl.corner.y);
        let theWidth = (widthBottom > widthTop) ? widthBottom : widthTop;
        let heightRight = Math.hypot(tr.corner.x - br.corner.x, tr.corner.y - br.corner.y);
        let heightLeft = Math.hypot(tl.corner.x - bl.corner.x, tr.corner.y - bl.corner.y);
        let theHeight = (heightRight > heightLeft) ? heightRight : heightLeft;

        //Transform!
        let finalDestCoords = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, theWidth - 1, 0, theWidth - 1, theHeight - 1, 0, theHeight - 1]); 
       // corners
        let srcCoords = cv.matFromArray(4, 1, cv.CV_32FC2, [tl.corner.x, tl.corner.y, tr.corner.x, tr.corner.y, br.corner.x, br.corner.y, bl.corner.x, bl.corner.y]);
        let dsize = new cv.Size(theWidth, theHeight);
        let M = cv.getPerspectiveTransform(srcCoords, finalDestCoords)
        let dst = new cv.Mat();

        cv.warpPerspective(image, dst, M, dsize);

        return dst

    },

поворот изображения

rotate_image(image, angle) {

            let dst = new cv.Mat();
            let dsize = new cv.Size(image.rows, image.cols);
            let center = new cv.Point(image.cols / 2, image.rows / 2);
            // You can try more different parameters
            let M = cv.getRotationMatrix2D(center, angle, 1);
            cv.warpAffine(image, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());

            return dst
        },