How to solve the problem of transparent image where the opencv.js projection transformation result is blank

When using opencv.js for image processing, sometimes you will encounter the problem of transparent images with blank image results after projection transformation. Here are the problems I encountered and the solutions.

When I was processing images, the code was able to successfully identify the four coordinates of the document, but when it came to the projection transformation step, the result was always blank transparent picture and there was no error. Here is part of the code for the projection transformation I used:

 // Projection transformation 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 transformx = cv.getperspectivetransform(srcquad, dstquad);
let target = new cv.mat();
cv.warpperspective(img, target, transmtx, new cv.size(img.cols, img.rows));
// Show the result cv.imshow(canvas, target);

To solve this problem, I made the following improvements:

1. Set the canvas size : After the image is loaded, that is, in the imgelement.onload function, set the width and height of the canvas to be consistent with the image size.
2. Add error handling : When the image loading fails, that is, in the imgelement.onerror function, add error handling to capture image loading errors.

Here is the complete code improved:

 

    <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 loading is completed.");
            processImage();
        }

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

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

            // Load the image imgElement.onload = function() {
                try {
                    img = cv.imread(imgElement);
                    if (img.empty()) {
                        console.error("Image could not be read.");
                        return;
                    }

                    // Get the canvas element and set the size let canvas = document.getElementById(&#39;canvasOutput&#39;);
                    canvas.width = img.cols;
                    canvas.height = img.rows;

                    // Reset image size let dsize = new cv.Size(img.cols, img.rows);
                    let dst = new cv.Mat();
                    cv.resize(img, dst, dsize, 0, 0, cv.INTER_AREA);

                    // Convert to grayscale image console.log("Before conversion:", img);
                    let gray = new cv.Mat(); // Create a new Mat object to store the grayscale image cv.cvtColor(dst, gray, cv.COLOR_BGR2GRAY); // Use appropriate conversion console.log("After conversion:", gray);

                    // Gaussian filter 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();

                    // Approximate polygon 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("Quadrilateral point detected:", points);

                        // Projection transform 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 transformtx = cv.getPerspectiveTransform(srcQuad, dstQuad);
                        let target = new cv.Mat();
                        cv.warpPerspective(img, target, transmtx, new cv.Size(img.cols, img.rows));

                        // Show the result cv.imshow(canvas, target);

                        // Create a temporary canvas element let tempCanvas = document.createElement(&#39;canvas&#39;);
                        tempCanvas.width = target.cols;
                        tempCanvas.height = target.rows;
                        let tempCtx = tempCanvas.getContext(&#39;2d&#39;);

                        // Convert cv.Mat to ImageData
                        let imageData = new ImageData(new Uint8ClampedArray(target.data), target.cols, target.rows);

                        // Draw ImageData on temporary canvas tempCtx.putImageData(imageData, 0, 0);

                        // Generate canvas to Blob object tempCanvas.toBlob((blob) => {
                            // Create a URL object let url = URL.createObjectURL(blob);
                            // Create an element a and set its attribute let a = document.createElement(&#39;a&#39;);
                            a.href = url;
                            a.download = &#39;processed_image.png&#39;; // Set the name of the download file // Add the a element to the body document.body.appendChild(a);
                            // Trigger the click event to start downloading a.click();
                            // Remove the a element document.body.removeChild(a);
                            // Release URL object URL.revokeObjectURL(url);
                        }, &#39;image/png&#39;);

                        // Free memory target.delete(); // Free target here, otherwise memory leaks}

                    // Free memory img.delete();
                    dst.delete();
                    gray.delete(); // Release grayscale image Mat
                    contours.delete();
                    hierarchy.delete();
                    approx.delete();
                    foundContour.delete();
                } catch (err) {
                    console.error("Image processing error:", err);
                }
            }

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

Through the above improvements, I successfully solved the problem that the result of the projection transformation is a blank transparent picture. Hope these improvements will be helpful to everyone.

The above is the detailed content of How to solve the problem that the result of OpenCV.js projection transformation is a blank transparent picture?. For more information, please follow other related articles on the PHP Chinese website!