Wie kann ich das Problem lösen, dass das Ergebnis der OpenCV.js -Projektionstransformation ein leeres transparentes Bild ist?

So lösen Sie das Problem des transparenten Bildes, bei dem das Ergebnis opencv.js Projektionstransformation leer ist

Bei Verwendung von OpenCV.js für die Bildverarbeitung stoßen Sie manchmal auf das Problem transparenter Bilder mit leeren Bildgebnissen nach der Projektionstransformation. Hier sind die Probleme, die ich begegnet bin, und die Lösungen.

Als ich Bilder verarbeitete, war der Code in der Lage, die vier Koordinaten des Dokuments erfolgreich zu identifizieren, aber wenn es um den Projektionstransformationsschritt ging, war das Ergebnis immer ein leeres transparentes Bild und es gab keinen Fehler. Hier ist ein Teil des Code für die von mir verwendete Projektionstransformation:

 // Projektionstransformation sei srcquad = cv.matfromarray (4, 1, cv.cv_32fc2, points.flat ());
lass dstquad = cv.matfromarray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
transformx = cv.getPerSpespespeTiveTransform (SRCQUAD, DSTQUAD);
let target = new cv.mat ();
CV.Warpperspektive (IMG, Target, TransMTX, New Cv.Size (IMG.Cols, IMG.Rows));
// Zeigen Sie das Ergebnis cv.imshow (Canvas, Ziel);

Um dieses Problem zu lösen, habe ich die folgenden Verbesserungen vorgenommen:

1. Legen Sie die Leinwandgröße ein : Nach dem Laden des Bildes stellen Sie die Breite und Höhe der Leinwand so, dass sie in der Funktion "IMGElement.onload" so einstellen, dass sie mit der Bildgröße übereinstimmt.
2. Fehlerbehandlung hinzufügen : Wenn das Bildladen fehlschlägt, fügen Sie in der Funktion "InerError" Fehlerbehandlung hinzu, um das Ladefehler des Bildes zu erfassen.

Hier ist der komplette Code verbessert:

 
<kopf>
    <meta charset="utf-8">
    <meta name="viewPort" content="width = Gerätebreite, initial-scale = 1,0">
    <title> opencv.js Beispiel </title>


    <script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onopencvReady ();"> </script>
    <canvas id="canvasoutput"> </canvas>
    <script>
        Funktion onopencvReady () {
            console.log ("opencv.js laden ist abgeschlossen.");
            processImage ();
        }

        Funktion Schlaf (ms) {
            Neues Versprechen zurückgeben (Resolve => setTimeout (Resolve, MS));
        }

        asynchrische Funktion processImage () {
            Warten Sie den Schlaf (3000); // 3 Sekunden warten lassen, lass ImageUrl = "../Archives/111.jpg";
            lass imgelement = new Image ();
            Imgelement.src = ImageUrl;
            var img;

            // laden Sie das Bild imgelement.onload = function () {
                versuchen {
                    img = cv.imread (iMgelement);
                    if (img.empty ()) {
                        console.Error ("Bild konnte nicht gelesen werden");
                        zurückkehren;
                    }

                    // Erhalten Sie das Canvas -Element und setzen Sie die Größe let canvas = document.getElementById (&#39;canvasoutput&#39;);
                    canvas.width = img.cols;
                    canvas.height = img.rows;

                    // Bildgröße zurücksetzen lassen dsize = new Cv.size (img.cols, img.rows);
                    Sei DST = new cv.mat ();
                    CV.Resize (IMG, DST, DSIZE, 0, 0, cv.inter_area);

                    // in Graustufenbildkonsole.log ("Before Conversion:", IMG) konvertieren;
                    lass grau = new cv.mat (); // Erstellen Sie ein neues MAT -Objekt zum Speichern des Graustufenbildes cv.cvtcolor (DST, Gray, cv.color_bgr2Gray); // Verwenden Sie eine entsprechende Conversion console.log ("Nach Umwandlung:", Gray);

                    // Gaußsche Filter cv.gaussianblur (grau, grau, neuer Cv.Size (11, 11), 0, 0);
                    cv.imshow (Leinwand, grau);
                    Cv.Canny (grau, grau, 20, 50, 3);

                    contours = neuer cv.matVector ();
                    let hierarchy = new cv.mat ();
                    cv.findcontours (grau, konturen, Hierarchie, cv.retr_ccomp, cv.chain_approx_none);

                    Sei index = 0, maxArea = 0;
                    const Area = img.cols * img.rows;
                    für (sei i = 0; i <contourss.size (); i) {
                        lass temparea = math.abs (cv.contourarea (contours.get (i)));
                        if (temparea> maxarea && temparea> 0.3 * Bereich) {
                            index = i;
                            MaxArea = temparea;
                        }
                    }

                    if (maxarea === 0) return;
                    const foundcontour = contours.get (index);
                    const arcl = cv.arclength (foundcontour, true);
                    Sei ca. = neuer cv.mat ();

                    // ungefähre Polygon cv.Apploxpolydp (Foundcontour, ca. 0,01 * ARCL, TRUE);

                    if (ca.Total () === 4) {
                        Sei Punkte = [];
                        const data32s = ca.data32s;
                        für (sei i = 0, len = data32slänge / 2; i <len; i) {
                            Punkte [i] = {x: data32s [i * 2], y: data32s [i * 2 1]};
                        }
                        console.log ("viereckiger Punkt erkannt:", Punkte);

                        // Projektionstransformation let srcquad = cv.matfromarray (4, 1, cv.cv_32fc2, points.flat ());
                        lass dstquad = cv.matfromarray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
                        transformtx = cv.getPerSpespespeTiveTransform (SRCQUAD, DSTQUAD);
                        let target = new cv.mat ();
                        CV.Warpperspektive (IMG, Target, TransMTX, New Cv.Size (IMG.Cols, IMG.Rows));

                        // Zeigen Sie das Ergebnis cv.imshow (Canvas, Ziel);

                        // Erstellen Sie ein temporäres Canvas -Element let tempcanvas = document.createelement (&#39;canvas&#39;);
                        tempcanvas.width = target.cols;
                        tempcanvas.height = target.rows;
                        let tempctx = tempcanvas.getContext (&#39;2d&#39;);

                        // cv.mat in iMagedata konvertieren
                        let iMagedata = new Imagedata (new Uint8Clampedarray (target.data), target.cols, target.rows);

                        // zeichnen imagedata auf temporärer Leinwand tempctx.putimagedata (Imagedata, 0, 0);

                        // Canvas für Blob -Objekt tempcanvas.toblob ((Blob) => {
                            // Erstellen Sie ein URL -Objekt, es sei url = url.createObjecturl (Blob);
                            // Erstellen Sie ein Element A und setzen Sie sein Attribut, let a = document.createelement (&#39;a&#39;);
                            a.reif = url;
                            A.Download = &#39;processed_image.png&#39;; // Setzen Sie den Namen der Download -Datei // das A -Element dem Körper dokument.body.AppendChild (a) hinzufügen;
                            // das Klickenereignis auslösen, um A.Click () herunterzuladen;
                            // Entfernen Sie das A -Element -Dokument.body.removechild (a);
                            // URL -Objekt -URL.revokeObjecturl (URL) freigeben;
                        }, &#39;Image/png&#39;);

                        // Free Memory Target.delete (); // kostenloses Ziel hier, ansonsten Speicherlecks}

                    // freier Speicher img.delete ();
                    dst.delete ();
                    Gray.Delete (); // Greyscale -Bildmatte freigeben
                    contours.delete ();
                    Hierarchie.delete ();
                    ca. Delete ();
                    foundcontour.delete ();
                } catch (err) {
                    console.Error ("Bildverarbeitungsfehler:", err);
                }
            }

            imgelement.onError = function () {
                console.Error ("Bild konnte nicht geladen werden");
            };
        }
    </script>

</kopf>

Das obige ist der detaillierte Inhalt vonWie kann ich das Problem lösen, dass das Ergebnis der OpenCV.js -Projektionstransformation ein leeres transparentes Bild ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!