Comment résoudre le problème que le résultat de la transformation de la projection OpenCV.JS est une image transparente vide?

Comment résoudre le problème de l'image transparente où le résultat de la transformation de la projection OpenCv.JS est vide

Lorsque vous utilisez OpenCV.js pour le traitement d'image, vous rencontrerez parfois le problème des images transparentes avec des résultats d'image vierges après transformation de projection. Voici les problèmes que j'ai rencontrés et les solutions.

Lorsque je traitais des images, le code a pu identifier avec succès les quatre coordonnées du document, mais en ce qui concerne l'étape de transformation de projection, le résultat était toujours une image transparente vide et il n'y avait pas d'erreur. Voici une partie du code de la transformation de projection que j'ai utilisée:

 // Transformation de projection Soit srcquad = cv.matFromArray (4, 1, cv.cv_32fc2, poncs.flat ());
Laissez dStquad = cv.matFromArray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
LET TRANSFORME = CV.GetPerSpectiveTransform (Srcquad, DSTQUAD);
Soit Target = new Cv.mat ();
CV.Warpperspective (IMG, Target, Transmtx, New Cv.Size (img.cols, img.rows));
// montre le résultat cv.imshow (canvas, cible);

Pour résoudre ce problème, j'ai apporté les améliorations suivantes:

1. Définissez la taille de la toile : une fois l'image chargée, c'est-à-dire dans la fonction IMGelement.onLot, définissez la largeur et la hauteur de la toile pour être cohérente avec la taille de l'image.
2. Ajouter une gestion des erreurs : lorsque le chargement de l'image échoue, c'est-à-dire dans la fonction ImGelement.onerror, ajoutez une gestion des erreurs pour capturer les erreurs de chargement d'image.

Voici le code complet amélioré:

 
<adal>
    <meta charset="utf-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">
    <title> Exemple OpenCV.JS 
 head>
</title>
    <script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onopencvReady ();"> </ script>
    <canvas id = "canvasOutput"> </ canvas>
    <cript>
        fonction onOpencVready () {
            Console.log ("OpenCV.JS Le chargement est terminé.");
            processimage ();
        }

        fonction Sleep (ms) {
            retourner la nouvelle promesse (résolution => setTimeout (résolution, ms));
        }

        fonction async processImage () {
            attendre le sommeil (3000); // attendez 3 secondes, laissez imageUrl = "../archives/111.jpg";
            Soit ImGelement = new Image ();
            imgement.src = imageUrl;
            var img;

            // Chargez l&#39;image imgelement.onload = function () {
                essayer {
                    img = cv.imRead (imgelement);
                    if (img.empty ()) {
                        Console.Error ("L&#39;image ne pouvait pas être lue.");
                        retour;
                    }

                    // Obtenez l&#39;élément Canvas et définissez la taille de LET Canvas = document.getElementById («CanvasOutput»);
                    canvas.width = img.cols;
                    canvas.height = img.rows;

                    // Réinitialiser la taille de l&#39;image Laissez dsize = new Cv.Size (img.cols, img.rows);
                    Soit dst = new Cv.mat ();
                    cv.resize (IMG, dst, dsize, 0, 0, cv.inter_area);

                    // Converti en Image GraySCale Console.log ("Avant la conversion:", IMG);
                    Soit Gray = new Cv.mat (); // Créez un nouvel objet MAT pour stocker l&#39;image de gris cv.cvtcolor (DST, Gray, Cv.Color_Bgr2Gray); // Utiliser la conversion appropriée Console.log ("après conversion:", gris);

                    // Filtre gaussien CV.GaussianBlur (gris, gris, nouveau cv.Size (11, 11), 0, 0);
                    cv.imshow (toile, gris);
                    Cv.Canny (gris, gris, 20, 50, 3);

                    Soit Contours = new Cv.Matvector ();
                    Soit hiérarchie = new Cv.Mat ();
                    cv.findContours (gris, contours, hiérarchie, cv.retr_comp, cv.chain_approx_none);

                    Soit index = 0, maxarea = 0;
                    constation const = img.cols * iMg.Rows;
                    pour (que i = 0; i <contours.size (); i) {
                        Soit temparea = math.abs (cv.Contourarea (contours.get (i)));
                        if (temParea> maxarea && temparea> 0,3 * zone) {
                            index = i;
                            Maxarea = TemParea;
                        }
                    }

                    if (maxarea === 0) return;
                    const CoundContour = contours.get (index);
                    const arcl = cv.arclong (CoundContour, true);
                    Soit approx = nouveau cv.mat ();

                    // Polygone approximatif CV.Approxpolydp (FoundContour, env, 0,01 * arcl, true);

                    if (approx.total () === 4) {
                        Soit Points = [];
                        const data32s = approx.data32s;
                        pour (soit i = 0, len = data32s.length / 2; i <len; i) {
                            points [i] = {x: data32s [i * 2], y: data32s [i * 2 1]};
                        }
                        Console.log ("Point quadrilatéral détecté:", points);

                        // Transformation de la projection Soit srcquad = cv.matFromArray (4, 1, cv.cv_32fc2, Point.flat ());
                        Laissez dStquad = cv.matFromArray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
                        Soit transformtx = cv.getPerSpectiveTransform (srcquad, dStquad);
                        Soit Target = new Cv.mat ();
                        CV.Warpperspective (IMG, Target, Transmtx, New Cv.Size (img.cols, img.rows));

                        // montre le résultat cv.imshow (canvas, cible);

                        // Créer un élément de canevas temporaire LET TempCanvas = Document.CreateElement (&#39;Canvas&#39;);
                        TempCanvas.Width = Target.Cols;
                        TempCanvas.Height = Target.Rows;
                        Soit tempctX = tempanvas.getContext (&#39;2d&#39;);

                        // Convertir Cv.mat en imagedata
                        Soit imagedata = new Imagedata (new UInt8ClampedArray (Target.Data), Target.Cols, Target.Rows);

                        // dessine iMagedata sur le toile temporaire tempctx.putImagedata (imagedata, 0, 0);

                        // Générer le canevas pour blob l&#39;objet TempCanvas.ToBlob ((blob) => {
                            // Créer un objet URL LET URL = url.createObjectUrl (blob);
                            // Créez un élément A et définissez son attribut Selt A = Document.CreateElement (&#39;A&#39;);
                            a.href = url;
                            A.Download = &#39;proced_image.png&#39;; // Définissez le nom du fichier de téléchargement // Ajoutez l&#39;élément A au corps Document.Body.ApendChild (a);
                            // déclenche l&#39;événement de clic pour commencer à télécharger a.click ();
                            // Supprimez le document a un élément.body.removechild (a);
                            // libérer URL Object URL.RevokeObjectUrl (URL);
                        }, &#39;image / png&#39;);

                        // Memory Target.Delete (); // cible libre ici, sinon les fuites de mémoire}

                    // mémoire libre img.delete ();
                    dst.delete ();
                    gris.delete (); // Libérez le tapis d&#39;image en niveaux de gris
                    contours.delete ();
                    Hierarchy.delete ();
                    approx.delete ();
                    FoundContour.Delete ();
                } catch (err) {
                    Console.Error ("Erreur de traitement d&#39;image:", ERR);
                }
            }

            imgement.onError = function () {
                Console.Error ("L&#39;image n&#39;a pas pu être chargée.");
            };
        }
    

</script></adal>

Grâce aux améliorations ci-dessus, j'ai résolu avec succès le problème que le résultat de la transformation de la projection est une image transparente vide. J'espère que ces améliorations seront utiles à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!