wsd1 · January 12, 2024 07:33
diff --git a/perspectiveTest.html b/perspectiveTest.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <title>Hello OpenCV.js</title>
 </head>

 <body>
    <h2>本demo展示了使用getPerspectiveTransform函数获取变换矩阵,并使用warpPerspective函数变换图片的能力.</h2>
    <h2>参考 https://docs.opencv.org/3.4/da/d54/group__imgproc__transform.html</h2>

    <p id="status">OpenCV.js is loading...</p>
    <div>
        <div class="inputoutput">
            <img id="imageSrc" alt="No Image" />
            <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
        </div>
        <div class="inputoutput">
            <canvas id="canvasOutput"></canvas>
            <div class="caption">canvasOutput</div>
        </div>
    </div>
    <script type="text/javascript">
        let imgElement = document.getElementById('imageSrc');
        let inputElement = document.getElementById('fileInput');
        inputElement.addEventListener('change', (e) => {
            imgElement.src = URL.createObjectURL(e.target.files[0]);
        }, false);

        /*
        imgElement.onload = function () {
            let mat = cv.imread(imgElement);
            cv.imshow('canvasOutput', mat);
            mat.delete();
        };        
        */

        var Module = {
            // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
            onRuntimeInitialized() {
                document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
                main_func();
            }
        };

        function main_func() {
            let imgElement = document.getElementById('imageSrc');
            let inputElement = document.getElementById('fileInput');
            let canvasOutput = document.getElementById('canvasOutput');
            let statusElement = document.getElementById('status');

            let perspectiveMatrix; // 用于存储透视变换矩阵

            inputElement.addEventListener('change', (e) => {
                imgElement.src = URL.createObjectURL(e.target.files[0]);
            }, false);

            imgElement.onload = function () {
                let srcMat = cv.imread(imgElement);

                // 已知顶点的四边形
                /*
                4, 1: 这两个参数指定了矩阵的行数和列数。在这个例子中,创建的是一个 4 行 1 列的矩阵,即一个列向量。
                cv.CV_32FC2: 这个参数指定了矩阵的数据类型。在这里,CV_32FC2 表示每个元素都是一个 32 位浮点数,且矩阵中每个元素有两个通道。
                [0, 0, srcMat.cols, 0, srcMat.cols, srcMat.rows, 0, srcMat.rows]: 这个数组包含了矩阵的数据。在这个例子中,它表示一个包含四对坐标的列向量,这些坐标表示一个矩形的四个角的 x 和 y 坐标。

                let srcPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, srcMat.cols, 0, srcMat.cols, srcMat.rows, 0, srcMat.rows]);
                let dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [-100, -100, srcMat.cols, 0, srcMat.cols * 0.8, srcMat.rows, srcMat.cols * 0.2, srcMat.rows]);
                */
                let srcPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, 100, 0, 100,100, 0, 100]);
                //let dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [0,0,80,-30,80,60,0,100]);
                let dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [20,30,100,0,100,90,20,130]);

                // 提取透视变换矩阵
                perspectiveMatrix = cv.getPerspectiveTransform(srcPoints, dstPoints);

                // 应用透视变换
                let dstMat = new cv.Mat();
                cv.warpPerspective(srcMat, dstMat, perspectiveMatrix, srcMat.size());

                // 在画布上显示结果
                cv.imshow(canvasOutput, dstMat);

                // 释放内存
                srcMat.delete();
                dstMat.delete();
                srcPoints.delete();
                dstPoints.delete();

            };

            var Module = {
                onRuntimeInitialized() {
                    statusElement.innerHTML = 'OpenCV.js is ready.';
                }
            };
        }

    </script>
    <script async src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Hello OpenCV.js</title>
	</head>

	<body>
	<h2>本demo展示了使用getPerspectiveTransform函数获取变换矩阵,并使用warpPerspective函数变换图片的能力.</h2>
	<h2>参考 https://docs.opencv.org/3.4/da/d54/group__imgproc__transform.html</h2>

	<p id="status">OpenCV.js is loading...</p>
	<div>
	<div class="inputoutput">
	<img id="imageSrc" alt="No Image" />
	<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
	</div>
	<div class="inputoutput">
	<canvas id="canvasOutput"></canvas>
	<div class="caption">canvasOutput</div>
	</div>
	</div>
	<script type="text/javascript">
	let imgElement = document.getElementById('imageSrc');
	let inputElement = document.getElementById('fileInput');
	inputElement.addEventListener('change', (e) => {
	imgElement.src = URL.createObjectURL(e.target.files[0]);
	}, false);

	/*
	imgElement.onload = function () {
	let mat = cv.imread(imgElement);
	cv.imshow('canvasOutput', mat);
	mat.delete();
	};
	*/

	var Module = {
	// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
	onRuntimeInitialized() {
	document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
	main_func();
	}
	};

	function main_func() {
	let imgElement = document.getElementById('imageSrc');
	let inputElement = document.getElementById('fileInput');
	let canvasOutput = document.getElementById('canvasOutput');
	let statusElement = document.getElementById('status');

	let perspectiveMatrix; // 用于存储透视变换矩阵

	inputElement.addEventListener('change', (e) => {
	imgElement.src = URL.createObjectURL(e.target.files[0]);
	}, false);

	imgElement.onload = function () {
	let srcMat = cv.imread(imgElement);

	// 已知顶点的四边形
	/*
	4, 1: 这两个参数指定了矩阵的行数和列数。在这个例子中,创建的是一个 4 行 1 列的矩阵,即一个列向量。
	cv.CV_32FC2: 这个参数指定了矩阵的数据类型。在这里,CV_32FC2 表示每个元素都是一个 32 位浮点数,且矩阵中每个元素有两个通道。
	[0, 0, srcMat.cols, 0, srcMat.cols, srcMat.rows, 0, srcMat.rows]: 这个数组包含了矩阵的数据。在这个例子中,它表示一个包含四对坐标的列向量,这些坐标表示一个矩形的四个角的 x 和 y 坐标。

	let srcPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, srcMat.cols, 0, srcMat.cols, srcMat.rows, 0, srcMat.rows]);
	let dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [-100, -100, srcMat.cols, 0, srcMat.cols * 0.8, srcMat.rows, srcMat.cols * 0.2, srcMat.rows]);
	*/
	let srcPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, 100, 0, 100,100, 0, 100]);
	//let dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [0,0,80,-30,80,60,0,100]);
	let dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [20,30,100,0,100,90,20,130]);

	// 提取透视变换矩阵
	perspectiveMatrix = cv.getPerspectiveTransform(srcPoints, dstPoints);

	// 应用透视变换
	let dstMat = new cv.Mat();
	cv.warpPerspective(srcMat, dstMat, perspectiveMatrix, srcMat.size());

	// 在画布上显示结果
	cv.imshow(canvasOutput, dstMat);

	// 释放内存
	srcMat.delete();
	dstMat.delete();
	srcPoints.delete();
	dstPoints.delete();

	};

	var Module = {
	onRuntimeInitialized() {
	statusElement.innerHTML = 'OpenCV.js is ready.';
	}
	};
	}

	</script>
	<script async src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>
	</body>

	</html>