opencv.js 프로젝션 변환의 결과가 빈 투명한 그림이라는 문제를 해결하는 방법은 무엇입니까?

OpenCV.JS 프로젝션 변환 결과가 비어있는 투명한 이미지 문제를 해결하는 방법

이미지 처리에 opencv.js를 사용하는 경우 때로는 투영 변환 후 빈 이미지 결과로 투명한 이미지 문제가 발생합니다. 내가 직면 한 문제와 솔루션은 다음과 같습니다.

이미지를 처리 ​​할 때 코드는 문서의 4 가지 좌표를 성공적으로 식별 할 수 있었지만 투영 변환 단계에있어 결과는 항상 빈 투명한 그림이었으며 오류가 없었습니다. 다음은 내가 사용한 프로젝션 변환에 대한 코드의 일부입니다.

 // 투영 변환 SRCQUAD = CV.MATFROMARRAY (4, 1, CV.CV_32FC2, Points.flat ());
dstquad = cv.matfromArray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows];
let transformx = cv.getPerspectiveTransform (srcquad, dstquad);
target = new Cv.mat ();
cv.warpperspective (IMG, Target, TransMtx, New Cv.Size (img.cols, img.rows));
// 결과를 보여줍니다 cv.imshow (캔버스, 대상);

이 문제를 해결하기 위해 다음과 같은 개선을했습니다.

1. 캔버스 크기 설정 : 이미지가로드 된 후, 즉 Imgelement.onload 기능에서 캔버스의 너비와 높이를 이미지 크기와 일치하도록 설정하십시오.
2. 오류 처리 추가 : 이미지 로딩이 실패하면, 즉 Imgelement.onerror 함수에서 이미지 로딩 오류를 캡처하기 위해 오류 처리를 추가하십시오.

완전한 코드는 다음과 같습니다.

 

    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> opencv.js 예 </title>


    <script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onopencvready ();"> </script>
    <canvas id="canvasoutput"> </canvas>
    <cript>
        function onopencvready () {
            console.log ( "opencv.js로드가 완료되었습니다.");
            processImage ();
        }

        기능 수면 (MS) {
            새로운 약속을 반환합니다 (Resolve => settimeout (Resolve, MS));
        }

        비동기 함수 processImage () {
            잠을 기다리고 있습니다 (3000); // 3 초 동안 기다려 indageUrl = "../Archives/111.jpg";
            imgelement = new Image ();
            imgelement.src = imageUrl;
            var img;

            // 이미지 imgelement.onload = function () {를로드합니다.
                노력하다 {
                    img = cv.imread (imgelement);
                    if (img.empty ()) {
                        Console.error ( "이미지를 읽을 수 없습니다.");
                        반품;
                    }

                    // 캔버스 요소를 가져 와서 크기를 설정하자 canvas = document.getElementById ( 'canvasoutput');
                    canvas.width = img.cols;
                    canvas.height = img.rows;

                    // 이미지 크기를 재설정하자 dsize = new cv.size (img.cols, img.rows);
                    dst = new Cv.mat ();
                    CV.Resize (IMG, DST, DSIZE, 0, 0, CV.INTER_AREA);

                    // 그레이 스케일 이미지 콘솔로 변환.
                    GREY = New CV.MAT (); // 그레이 스케일 이미지 cv.cvtcolor (dst, grey, cv.color_bgr2gray)를 저장하기 위해 새 매트 객체를 만듭니다. // 적절한 변환 콘솔을 사용합니다.

                    // 가우스 필터 cv.gaussianBlur (회색, 회색, 새로운 CV.Size (11, 11), 0, 0);
                    cv.imshow (캔버스, 회색);
                    cv.canny (회색, 회색, 20, 50, 3);

                    윤곽을하자 = 새로운 cv.matvector ();
                    Hierarchy = New Cv.mat ();
                    CV.FindContours (회색, 윤곽선, 계층 구조, CV.RETR_CCOMP, CV.chain_Approx_none);

                    index = 0, maxArea = 0;
                    const area = img.cols * img.rows;
                    for (i = 0; i <contours.size i temparea="math.abs" if> maxArea && temparea> 0.3 * 면적) {
                            색인 = i;
                            maxArea = temparea;
                        }
                    }

                    if (maxArea === 0) 반환;
                    Const FoundContour = Contours.get (색인);
                    const arcl = cv.arclength (FoundContour, true);
                    대략 = 새로운 CV.MAT ();

                    // 근사 다각형 CV. ApproxPolyDP (FoundContour, 약 0.01 * arcl, true);

                    if (대략 total () === 4) {
                        지점 = [];
                        const data32s = 대략 data32s;
                        for (i = 0, len = data32s.length / 2; i <len i : data32s y console.log projection transform srcquad="cv.matfromArray" cv.cv_32fc2 points.flat dstquad="cv.matfromArray" img.cols img.rows let transformtx="cv.getPerspectivetransform" target="new" cv.mat cv.warpperspective transmtx new cv.size cv.imshow tempcanvas="document.createElement" tempcanvas.width="target.cols;" tempcanvas.height="target.rows;" tempctx="tempcanvas.getContext" imadedata imagedata="new" imageata uint8clampedarray target.cols target.rows blob tempcanvas.toblob> {{
                            // URL 객체 생성을 let url = url.createobjecturl (blob);
                            // 요소 a를 만들고 속성을 설정하십시오.
                            A.href = URL;
                            a.download = 'processed_image.png'; // 다운로드 파일의 이름 설정 // 요소를 신체 문서에 추가합니다.
                            // 클릭 이벤트를 트리거하여 다운로드를 시작합니다 a.click ();
                            // 요소 문서를 제거합니다.
                            // release url object url.revokeObjectUrl (url);
                        }, 'image/png');

                        // free memory target.delete (); // 여기에서 무료 대상, 그렇지 않으면 메모리 누출}

                    // free memory img.delete ();
                    dst.delete ();
                    그레이 .delete (); // 그레이 스케일 이미지 매트를 릴리스합니다
                    윤곽 .Delete ();
                    Hierarchy.delete ();
                    대략 delete ();
                    FoundContour.delete ();
                } catch (err) {
                    Console.error ( "이미지 처리 오류 :", err);
                }
            }

            imgelement.onerror = function () {
                Console.error ( "이미지를로드 할 수 없습니다.");
            };
        }
    스크립트>

</len></contours.size></cript>

위 내용은 opencv.js 프로젝션 변환의 결과가 빈 투명한 그림이라는 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!