opencv.js投影変換の結果が空白の透明な画像であるという問題を解決する方法は？

opencv.js投影変換の結果が空いている透明な画像の問題を解決する方法

画像処理にopencv.jsを使用する場合、投影変換後に空白の画像結果を伴う透明な画像の問題に遭遇する場合があります。ここに私が遭遇した問題と解決策があります。

画像を処理していたとき、コードはドキュメントの4つの座標を正常に識別することができましたが、投影変換ステップになると、結果は常に空白の透明な画像であり、エラーはありませんでした。これが私が使用した投影変換のコードの一部です：

 //投影変換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]）;
transformx = cv.getPersspectivetransform（srcquad、dstquad）;
ターゲット= new cv.mat（）;
cv.warpperspective（img、target、transmtx、new cv.size（img.cols、img.rows））;
//結果を表示cv.imshow（canvas、ターゲット）;

この問題を解決するために、次の改善を行いました。

1. キャンバスサイズを設定します：画像がロードされた後、つまりimgelement.onload関数で、キャンバスの幅と高さを画像サイズと一致させるように設定します。
2. エラー処理の追加：画像の読み込みが失敗した場合、つまりimgelement.onerror関数で、エラー処理を追加して画像読み込みエラーをキャプチャします。

これが完全なコードの改善です：

 

    
    <meta name="Viewport" content="width = device-width、initial-scale = 1.0">
    <title> opencv.jsの例</title>


     
    <canvas id="canvasoutput"> </canvas>
    
        function onopencvready（）{
            console.log（ "opencv.jsロードが完了しました。"）;
            ProcessImage（）;
        }

        機能スリープ（MS）{
            新しい約束を返します（Resolve => setimeout（Resolve、MS））;
        }

        async関数processimage（）{
            睡眠を待っています（3000）; // 3秒間待機しますlet imageurl = "../archives/111.jpg";
            imgelement = new Image（）;
            imgelement.src = imageurl;
            var img;

            //画像imgelement.onload = function（）をロードする{
                試す {
                    img = cv.imread（imgelement）;
                    if（img.empty（））{
                        console.error（ "画像は読み取れなかった。"）;
                        戻る;
                    }

                    //キャンバス要素を取得し、サイズを設定しますlet canvas = document.getElementById（ 'canvasoutput'）;
                    canvas.width = img.cols;
                    canvas.height = img.rows;

                    //イメージサイズをリセットしますdsize = new cv.size（img.cols、img.rows）;
                    let dst = new cv.mat（）;
                    cv.resize（img、dst、dsize、0、0、cv.inter_area）;

                    // GrayScale Image Console.log（ "変換前："、IMG）に変換します。
                    let gray = new cv.mat（）; //新しいMATオブジェクトを作成して、グレースケール画像CV.CVTCOLOR（DST、GRAY、CV.COLOR_BGR2GRAY）を保存します。 //適切な変換Console.log（ "コンバージョン後："、灰色）を使用します。

                    // Gaussian Filter CV.GaussianBlur（灰色、灰色、新しいcv.size（11、11）、0、0）;
                    cv.imshow（キャンバス、グレー）;
                    cv.canny（灰色、灰色、20、50、3）;

                    contours = new cv.matvector（）;
                    let hierarchy = new cv.mat（）;
                    cv.findcontours（灰色、輪郭、階層、cv.retr_ccomp、cv.chain_approx_none）;

                    index = 0、maxarea = 0とします。
                    const area = img.cols * img.rows;
                    for（let i = 0; i <contours.size i let temparea="math.abs（cv.contourarea（contours.get（i）））;" if> maxarea && temparea> 0.3 *エリア）{
                            index = i;
                            Maxarea = Temparea;
                        }
                    }

                    if（maxarea === 0）return;
                    const foundContour = contours.get（index）;
                    const arcl = cv.arclength（foundcontour、true）;
                    retx = new cv.mat（）;

                    //近似ポリゴンcv.approxpolydp（foundContour、約0.01 * arcl、true）;

                    if（compx.total（）=== 4）{
                        let points = [];
                        const data32s = compx.data32s;
                        for（i = 0、len = data32s.length / 2; i <len i console.log 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]）;" transformtx="cv.getPersspectivetransform（srcquad、dstquad）;" new cv.mat cv.warpperspective cv.size document.createelment tempcanvas.width="target.cols;" tempcanvas.height="target.rows;" tempctx="tempcanvas.getContext（" imagedata="new" uint8clampedarray canvas> {
                            // urlオブジェクトを作成しますurl = url.createobjecturl（blob）;
                            //要素aを作成し、その属性を設定します。
                            A.href = url;
                            a.download = 'Processed_image.png'; //ダウンロードファイルの名前を設定します// body document.body.appendchild（a）に要素を追加します。
                            //クリックイベントをトリガーして、a.click（）のダウンロードを開始します。
                            // a要素document.body.removechild（a）を削除します。
                            // url object url.revokeobjecturl（url）をリリースします。
                        }、 'image/png'）;

                        // free memory target.delete（）; //ここで無料のターゲット、そうでなければメモリリーク}

                    //無料メモリimg.delete（）;
                    dst.delete（）;
                    gray.delete（）; //グレースケール画像マットをリリースします
                    contours.delete（）;
                    hierarchy.delete（）;
                    amplx.delete（）;
                    foundcontour.delete（）;
                } catch（err）{
                    console.error（ "画像処理エラー："、err）;
                }
            }

            imgelement.onerror = function（）{
                console.error（ "画像をロードできませんでした。"）;
            };
        }
    

</len></contours.size>

上記の改善により、投影変換の結果が空白の透明な絵であるという問題をうまく解決しました。これらの改善がすべての人に役立つことを願っています。

以上がopencv.js投影変換の結果が空白の透明な画像であるという問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。