射影几何与透视单应性矩阵（Homography Matrix）：前端四点畸变矫正-开发者社区

射影几何与透视单应性矩阵（Homography Matrix）：前端四点畸变矫正

在计算机视觉（Computer Vision）、文档扫描识别 App（如扫描全能王）、以及网页端先锋 3D 投影海报映射中，“四点透视畸变矫正（Perspective Rectification / Four-point Distortion Correction）”是一项极其经典且高难度的几何算法：

用户斜着用手机对着桌上的合同发票拍了一张照片，由于摄像机透视视角，照片里的矩形合同变成了一个不规则的梯形/任意四边形；
用户在屏幕上拖动四个角点（Top-Left, Top-Right, Bottom-Right, Bottom-Left）；
系统瞬间将这个倾斜扭曲的四边形，以像素级平滑的透视投影，“拉直拍平”为一个方方正正的正向高清矩形！

在射影几何学（Projective Geometry）中，连接两个不同平面透视投影的至高数学桥梁，被称为单应性矩阵（Homography Matrix / $3 \times 3$ 射影变换）。

本文将深入推导单应性矩阵的直接线性变换算法（DLT），并在纯 TypeScript 与 Canvas/CSSmatrix3d()中手写一个零外部依赖的四点透视畸变矫正引擎！

单应性变换的射影几何方程

在二维齐次坐标系中，设源平面上的任意一点为 $\mathbf{p} = [x, y, 1]^T$，经过透视变换后在目标平面上的投影坐标为 $\mathbf{p}' = [x', y', 1]^T$。

两者通过一个 $3 \times 3$ 的单应性矩阵 $\mathbf{H}$ 线性相连（相差一个非零尺度因子 $s$）：

$$s \begin{bmatrix} x' \ y' \ 1 \end{bmatrix} = \mathbf{H} \begin{bmatrix} x \ y \ 1 \end{bmatrix} = \begin{bmatrix} h_{00} & h_{01} & h_{02} \ h_{10} & h_{11} & h_{12} \ h_{20} & h_{21} & h_{22} \end{bmatrix} \begin{bmatrix} x \ y \ 1 \end{bmatrix}$$

展开齐次坐标并消除尺度因子 $s$（齐次除法）：

$$x' = \frac{h_{00} x + h_{01} y + h_{02}}{h_{20} x + h_{21} y + h_{22}}, \quad y' = \frac{h_{10} x + h_{11} y + h_{12}}{h_{20} x + h_{21} y + h_{22}}$$

[源梯形四边形: 4 个顶点 (xi, yi)] │ ▼ (直接线性变换 DLT: 构建 8x8 线性方程组 A·h = 0) [求解 3x3 单应性矩阵 H (8 个独立自由度)] │ ▼ (转换为 CSS matrix3d 或 Canvas 双线性纹理映射) [瞬间拉平为正向完美矩形 (0, 0) -> (W, H)！🔥]

直接线性变换算法（DLT）求解 8 自由度参数

由于矩阵 $\mathbf{H}$ 具有整体尺度等价性，我们令 $h_{22} = 1$（8 个未知数）。

每一个点对 $(\mathbf{p}_i \leftrightarrow \mathbf{p}'_i)$ 可以提供两个独立的线性方程：

$$\begin{cases}
x_i h_{00} + y_i h_{01} + h_{02} - x_i x'i h{20} - y_i x'i h{21} = x'i \
x_i h{10} + y_i h_{11} + h_{12} - x_i y'i h{20} - y_i y'i h{21} = y'_i
\end{cases}$$

四对对应顶点恰好提供 $4 \times 2 = 8$ 个方程，构成一个确定性的 $8 \times 8$ 线性方程组 $\mathbf{A} \mathbf{h} = \mathbf{b}$，利用高斯消元法（Gaussian Elimination）即可在 0.1ms 内精确求解！

TypeScript 纯数学单应性矩阵求解引擎

// homography-solver.ts export type Point2D = { x: number; y: number }; export class HomographySolver { // 求解高斯消元法 private static solveGaussian(A: number[][], b: number[]): number[] { const n = b.length; for (let i = 0; i < n; i++) { // 寻找主元 let maxEl = Math.abs(A[i][i]); let maxRow = i; for (let k = i + 1; k < n; k++) { if (Math.abs(A[k][i]) > maxEl) { maxEl = Math.abs(A[k][i]); maxRow = k; } } // 交换行 for (let k = i; k < n; k++) { const tmp = A[maxRow][k]; A[maxRow][k] = A[i][k]; A[i][k] = tmp; } const tmpB = b[maxRow]; b[maxRow] = b[i]; b[i] = tmpB; // 消元 for (let k = i + 1; k < n; k++) { const c = -A[k][i] / A[i][i]; for (let j = i; j < n; j++) { if (i === j) A[k][j] = 0; else A[k][j] += c * A[i][j]; } b[k] += c * b[i]; } } // 回代求解 const x = new Array(n).fill(0); for (let i = n - 1; i >= 0; i--) { x[i] = b[i] / A[i][i]; for (let k = i - 1; k >= 0; k--) { b[k] -= A[k][i] * x[i]; } } return x; } // 输入 4 对顶点，求解 3x3 单应性矩阵 [h00, h01, h02, h10, h11, h12, h20, h21, 1] public static findHomography(src: Point2D[], dst: Point2D[]): number[] { const A: number[][] = []; const b: number[] = []; for (let i = 0; i < 4; i++) { const { x, y } = src[i]; const { x: u, y: v } = dst[i]; A.push([x, y, 1, 0, 0, 0, -x * u, -y * u]); b.push(u); A.push([0, 0, 0, x, y, 1, -x * v, -y * v]); b.push(v); } const h8 = this.solveGaussian(A, b); return [h8[0], h8[1], h8[2], h8[3], h8[4], h8[5], h8[6], h8[7], 1.0]; } // 将 3x3 单应性矩阵映射为 CSS 4x4 matrix3d 字面量 public static toCssMatrix3D(H: number[]): string { // 映射齐次三维变换矩阵 const a1 = H[0], b1 = H[3], d1 = H[6]; const a2 = H[1], b2 = H[4], d2 = H[7]; const a4 = H[2], b4 = H[5], d4 = H[8]; return `matrix3d( ${a1.toFixed(6)}, ${b1.toFixed(6)}, 0, ${d1.toFixed(6)}, ${a2.toFixed(6)}, ${b2.toFixed(6)}, 0, ${d2.toFixed(6)}, 0, 0, 1, 0, ${a4.toFixed(6)}, ${b4.toFixed(6)}, 0, ${d4.toFixed(6)} )`; } }

生产实战：四点拖拽透视矫正交互体验

// 业务驱动示例 const srcQuad: Point2D[] = [ { x: 40, y: 80 }, // Top-Left (梯形偏左) { x: 320, y: 40 }, // Top-Right { x: 360, y: 260 }, // Bottom-Right { x: 20, y: 220 }, // Bottom-Left ]; const targetRect: Point2D[] = [ { x: 0, y: 0 }, { x: 300, y: 0 }, { x: 300, y: 200 }, { x: 0, y: 200 }, ]; // 求解透视矩阵 const H = HomographySolver.findHomography(srcQuad, targetRect); const cssMatrix = HomographySolver.toCssMatrix3D(H); // 提交给 DOM 执行 GPU 硬件级透视展开！ const imageElement = document.getElementById('distortedDocument')!; imageElement.style.transformOrigin = '0 0'; imageElement.style.transform = cssMatrix;