Cara menyelesaikan masalah imej telus di mana hasil transformasi unjuran opencv.js kosong

Apabila menggunakan OpenCV.js untuk pemprosesan imej, kadang -kadang anda akan menghadapi masalah imej telus dengan hasil imej kosong selepas transformasi unjuran. Berikut adalah masalah yang saya hadapi dan penyelesaiannya.

Apabila saya memproses imej, kod itu dapat berjaya mengenal pasti empat koordinat dokumen itu, tetapi apabila ia sampai ke langkah transformasi unjuran, hasilnya sentiasa gambar telus kosong dan tidak ada kesilapan. Berikut adalah sebahagian daripada kod untuk transformasi unjuran yang saya gunakan:

 // Transformasi unjuran Let srcquad = cv.matFromArray (4, 1, cv.cv_32fc2, points.flat ());
Let dstquad = cv.matFromArray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
biarkan transformx = cv.getPerspectiveTransform (srcquad, dstquad);
biarkan sasaran = cv.mat baru ();
cv.warpperspective (IMG, Target, transmtx, cv.size baru (img.cols, img.rows));
// tunjukkan hasil cv.imshow (kanvas, sasaran);

Untuk menyelesaikan masalah ini, saya membuat penambahbaikan berikut:

1. Tetapkan saiz kanvas : Selepas imej dimuatkan, iaitu, dalam fungsi Imgelement.onload, tetapkan lebar dan ketinggian kanvas untuk selaras dengan saiz imej.
2. Tambah pengendalian ralat : Apabila pemuatan imej gagal, iaitu, dalam fungsi Imgelement.onerror, tambahkan pengendalian ralat untuk menangkap ralat pemuatan imej.

Inilah kod lengkap yang diperbaiki:

 

    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirtment> OpenCv.js Contoh 


    <script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onopencvready ();"> </script>
    <canvas id="canvasOutput"> </canvas>
    <script>
        fungsi onOpencvready () {
            console.log ("OpenCv.js memuat selesai.");
            processImage ();
        }

        fungsi tidur (MS) {
            kembali janji baru (resolve => setTimeout (resolve, ms));
        }

        ProcessImage fungsi async () {
            menunggu tidur (3000); // tunggu selama 3 saat biarkan imageurl = "../archives/111.jpg";
            biarkan imgelement = imej baru ();
            imgelement.src = imageUrl;
            var img;

            // Muatkan imej imgelement.onload = function () {
                Cuba {
                    img = cv.imread (imgElement);
                    jika (img.empty ()) {
                        Console.error ("Imej tidak dapat dibaca.");
                        kembali;
                    }

                    // Dapatkan elemen kanvas dan tetapkan saiz biarkan kanvas = document.getElementById (&#39;CanvasOutput&#39;);
                    kanvas.width = img.cols;
                    kanvas.height = img.rows;

                    // Reset saiz imej biarkan dsize = cv.size baru (img.cols, img.rows);
                    biarkan dst = cv.mat baru ();
                    cv.resize (img, dst, dsize, 0, 0, cv.inter_area);

                    // Tukar ke Console.log imej skala kelabu ("Sebelum penukaran:", img);
                    biarkan kelabu = cv.mat baru (); // Buat objek tikar baru untuk menyimpan imej kelabu cv.cvtcolor (DST, Grey, cv.color_bgr2gray); // Gunakan konsol penukaran yang sesuai ("selepas penukaran:", kelabu);

                    // Gaussian Filter cv.gaussianblur (kelabu, kelabu, cv.size baru (11, 11), 0, 0);
                    cv.imshow (kanvas, kelabu);
                    cv.canny (kelabu, kelabu, 20, 50, 3);

                    biarkan kontur = baru cv.matvector ();
                    biarkan hierarki = baru cv.mat ();
                    cv.findConTours (kelabu, kontur, hierarki, cv.retr_ccomp, cv.chain_approx_none);

                    Biarkan indeks = 0, maxArea = 0;
                    const area = img.cols * img.rows;
                    untuk (biarkan i = 0; i <contours.size (); i) {
                        biarkan tempeAa = math.abs (cv.contourArea (contours.get (i)));
                        jika (temparea> maxarea && temparea> 0.3 * kawasan) {
                            indeks = i;
                            MaxArea = temparea;
                        }
                    }

                    jika (maxarea === 0) kembali;
                    const foundContour = contours.get (index);
                    const arcl = cv.arclength (foundContour, true);
                    biarkan lebihan = cv.mat baru ();

                    // anggaran polygon cv.approxpolydp (foundContour, kira -kira, 0.01 * arcl, true);

                    jika (kira -kira.total () === 4) {
                        biarkan mata = [];
                        const data32s = rox.data32s;
                        untuk (biarkan i = 0, len = data32s.length / 2; i <len; i) {
                            mata [i] = {x: data32s [i * 2], y: data32s [i * 2 1]};
                        }
                        Console.log ("titik kuadrilateral dikesan:", mata);

                        // Transformasi unjuran biarkan srcquad = cv.matFromArray (4, 1, cv.cv_32fc2, points.flat ());
                        Let dstquad = cv.matFromArray (4, 1, cv.cv_32fc2, [0, 0, img.cols, 0, img.cols, img.rows, 0, img.rows]);
                        biarkan transformtx = cv.getPerspectiveTransform (srcquad, dstquad);
                        biarkan sasaran = cv.mat baru ();
                        cv.warpperspective (IMG, Target, transmtx, cv.size baru (img.cols, img.rows));

                        // tunjukkan hasil cv.imshow (kanvas, sasaran);

                        // Buat elemen kanvas sementara biarkan tempCanvas = document.createElement (&#39;kanvas&#39;);
                        tempcanvas.width = target.cols;
                        tempcanvas.height = target.rows;
                        biarkan tempctx = tempCanvas.getContext (&#39;2d&#39;);

                        // tukar cv.mat ke imagedata
                        Let ImageData = new ImageData (baru uint8clampedArray (target.data), target.cols, target.rows);

                        // lukis imagedata pada kanvas sementara tempctx.putimagedata (ImageData, 0, 0);

                        // menjana kanvas ke objek gumpalan tempcanvas.toblob ((blob) => {
                            // Buat objek URL biarkan url = url.createObjectUrl (blob);
                            // Buat elemen a dan tetapkan atributnya biarkan a = document.createeelement (&#39;a&#39;);
                            A.Href = url;
                            A.Download = &#39;Processed_image.png&#39;; // Tetapkan nama fail muat turun // Tambah elemen ke dokumen badan.body.appendchild (a);
                            // mencetuskan acara klik untuk mula memuat turun a.click ();
                            // Keluarkan elemen dokumen.body.removechild (a);
                            // Siaran url objek url.RevokeObjectUrl (url);
                        }, &#39;imej/png&#39;);

                        // sasaran memori percuma.delete (); // sasaran percuma di sini, jika tidak, kebocoran memori}

                    // memori percuma img.delete ();
                    dst.delete ();
                    kelabu.delete (); // Lepaskan tikar imej skala kelabu
                    contours.delete ();
                    hierarki.delete ();
                    kira -kira.delete ();
                    foundContour.delete ();
                } menangkap (err) {
                    Console.error ("Ralat pemprosesan imej:", err);
                }
            }

            imgelement.onerror = function () {
                Console.error ("Imej tidak boleh dimuatkan.");
            };
        }
    </script>

</tirtment>

Melalui penambahbaikan di atas, saya berjaya menyelesaikan masalah bahawa hasil transformasi unjuran adalah gambar telus kosong. Semoga penambahbaikan ini dapat membantu semua orang.

Atas ialah kandungan terperinci Bagaimana menyelesaikan masalah yang hasil transformasi unjuran opencv.js adalah gambar telus kosong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!