如何解決OpenCV.js投影變換後結果為空白透明圖片的問題？

如何解決opencv.js投影變換結果為空白的透明圖片問題

在使用opencv.js進行圖像處理時，有時候會遇到投影變換後圖像結果為空白的透明圖片的問題。以下是我遇到的問題以及解決方法。

我在處理圖像時，代碼能夠成功識別出文檔的四個坐標，但到了投影變換這一步，得到的結果總是空白的透明圖片，並且沒有報錯。以下是我使用的投影變換部分代碼：

 // 投影變換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]);
let transmtx = cv.getperspectivetransform(srcquad, dstquad);
let target = new cv.mat();
cv.warpperspective(img, target, transmtx, new cv.size(img.cols, img.rows));
// 顯示結果cv.imshow(canvas, target);

為了解決這個問題，我進行了以下改進：

1. 設置canvas 大小：在圖像加載完成後，即在imgelement.onload 函數中，設置canvas 的寬度和高度與圖像的尺寸一致。
2. 添加錯誤處理：在圖像加載失敗時，即在imgelement.onerror 函數中，添加錯誤處理以捕獲圖像加載錯誤。

以下是改進後的完整代碼：

 

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenCV.js Example</title>


    <script async src="https://docs.opencv.org/4.5.5/opencv.js" onload="onOpenCvReady();"></script>
    <canvas id="canvasOutput"></canvas>
    <script>
        function onOpenCvReady() {
            console.log("OpenCV.js加載完成.");
            processImage();
        }

        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function processImage() {
            await sleep(3000); // 等待3 秒let imageUrl = "../archives/111.jpg";
            let imgElement = new Image();
            imgElement.src = imageUrl;
            var img;

            // 加載圖像imgElement.onload = function() {
                try {
                    img = cv.imread(imgElement);
                    if (img.empty()) {
                        console.error("Image could not be read.");
                        return;
                    }

                    // 獲取canvas 元素並設置大小let canvas = document.getElementById(&#39;canvasOutput&#39;);
                    canvas.width = img.cols;
                    canvas.height = img.rows;

                    // 重置圖像大小let dsize = new cv.Size(img.cols, img.rows);
                    let dst = new cv.Mat();
                    cv.resize(img, dst, dsize, 0, 0, cv.INTER_AREA);

                    // 轉為灰度圖像console.log("轉換之前:", img);
                    let gray = new cv.Mat(); // 創建一個新的Mat 對象來存灰度圖像cv.cvtColor(dst, gray, cv.COLOR_BGR2GRAY); // 使用適當的轉換console.log("轉換之後:", gray);

                    // 高斯濾波cv.GaussianBlur(gray, gray, new cv.Size(11, 11), 0, 0);
                    cv.imshow(canvas, gray);
                    cv.Canny(gray, gray, 20, 50, 3);

                    let contours = new cv.MatVector();
                    let hierarchy = new cv.Mat();
                    cv.findContours(gray, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_NONE);

                    let 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 (tempArea > maxArea && tempArea > 0.3 * area) {
                            index = i;
                            maxArea = tempArea;
                        }
                    }

                    if (maxArea === 0) return;
                    const foundContour = contours.get(index);
                    const arcL = cv.arcLength(foundContour, true);
                    let approx = new cv.Mat();

                    // 逼近多邊形cv.approxPolyDP(foundContour, approx, 0.01 * arcL, true);

                    if (approx.total() === 4) {
                        let points = [];
                        const data32S = approx.data32S;
                        for (let i = 0, len = data32S.length / 2; i < len; i ) {
                            points[i] = {x: data32S[i * 2], y: data32S[i * 2 1]};
                        }
                        console.log("檢測到四邊形點:", points);

                        // 投影變換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]);
                        let transmtx = cv.getPerspectiveTransform(srcQuad, dstQuad);
                        let target = new cv.Mat();
                        cv.warpPerspective(img, target, transmtx, new cv.Size(img.cols, img.rows));

                        // 顯示結果cv.imshow(canvas, target);

                        // 創建一個臨時的canvas 元素let tempCanvas = document.createElement(&#39;canvas&#39;);
                        tempCanvas.width = target.cols;
                        tempCanvas.height = target.rows;
                        let tempCtx = tempCanvas.getContext(&#39;2d&#39;);

                        // 將cv.Mat 轉換為ImageData
                        let imageData = new ImageData(new Uint8ClampedArray(target.data), target.cols, target.rows);

                        // 將ImageData 繪製到臨時的canvas 上tempCtx.putImageData(imageData, 0, 0);

                        // 將canvas 生成Blob 對象tempCanvas.toBlob((blob) => {
                            // 創建一個URL 對象let url = URL.createObjectURL(blob);
                            // 創建一個a 元素並設置其屬性let a = document.createElement(&#39;a&#39;);
                            a.href = url;
                            a.download = &#39;processed_image.png&#39;; // 設置下載文件的名稱// 將a 元素添加到body 中document.body.appendChild(a);
                            // 觸發點擊事件以開始下載a.click();
                            // 下載完成後移除a 元素document.body.removeChild(a);
                            // 釋放URL 對象URL.revokeObjectURL(url);
                        }, &#39;image/png&#39;);

                        // 釋放內存target.delete(); // 在這裡釋放target，否則會造成內存洩露}

                    // 釋放內存img.delete();
                    dst.delete();
                    gray.delete(); // 釋放灰度圖像Mat
                    contours.delete();
                    hierarchy.delete();
                    approx.delete();
                    foundContour.delete();
                } catch (err) {
                    console.error("圖像處理出現錯誤:", err);
                }
            }

            imgElement.onerror = function() {
                console.error("Image could not be loaded.");
            };
        }
    </script>

通過上述改進，我成功解決了投影變換後結果為空白透明圖片的問題。希望這些改進對大家也有幫助。

以上是如何解決OpenCV.js投影變換後結果為空白透明圖片的問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！