图像变换：从像素操作到特征提取的视觉处理

图像即矩阵

在计算机中，一张彩色图像是一个三维张量 (H, W, C) -- 高度、宽度和颜色通道。图像 Transform 本质上是对这个张量进行数学运算，产生新的张量。

几何变换

仿射变换 Affine Transform

仿射变换保持直线的平行性。它可以用 2×3 矩阵 [a, b, c, d, e, f] 表示，CSS 的 matrix(a, b, c, d, e, f) 就是仿射变换。

// Canvas 仿射变换
ctx.setTransform(a, b, c, d, e, f);

ctx.transform(a, b, c, d, e, f);

透视变换 Perspective Transform

透视变换不保持平行性，可以用 3×3 矩阵表示。常用于文档矫正、车牌识别等场景：

# OpenCV 透视变换
M = cv2.getPerspectiveTransform(src_points, dst_points)
result = cv2.warpPerspective(image, M, (width, height))

频域变换

离散余弦变换 DCT

JPEG 压缩的核心。将图像从空间域转换到频域，能量集中在低频分量，高频分量可以被丢弃：

F(u,v) = (1/4) C(u) C(v) ΣΣ f(x,y) cos[(2x+1)uπ/16] cos[(2y+1)vπ/16]

8×8 图像块经过 DCT 后，左上角是直流分量（DC），右下角是最高频分量（AC）。JPEG 通过量化表丢弃高频系数。

霍夫变换 Hough Transform

霍夫变换将图像空间中的点映射到参数空间，用于检测直线、圆等几何形状：

# 直线检测：极坐标形式 ρ = x·cos(θ) + y·sin(θ)
for each edge point (x, y):
  for θ in [0, π):
    ρ = x·cos(θ) + y·sin(θ)
    accumulator[θ][ρ] += 1

# 累加器中的峰值即为检测到的直线

Canvas 实践：图像旋转

function rotateImage(image, angle) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const rad = angle * Math.PI / 180;


  const sin = Math.abs(Math.sin(rad));
  const cos = Math.abs(Math.cos(rad));
  canvas.width  = image.width * cos + image.height * sin;
  canvas.height = image.width * sin + image.height * cos;


  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(rad);
  ctx.drawImage(image, -image.width / 2, -image.height / 2);

  return canvas;
}

卷积变换

卷积是图像处理中最核心的 Transform。一个 3×3 卷积核滑过图像，每个输出像素是周围像素的加权求和：

// 边缘检测核 (Sobel-X)
┌ -1  0  1 ┐
│ -2  0  2 │
└ -1  0  1 ┘


┌ 1  2  1 ┐
│ 2  4  2 │  × (1/16)
└ 1  2  1 ┘

卷积核本质上是一种滤波器 -- 不同的核实现模糊、锐化、边缘检测等不同的 Transform 效果。CNN 中的卷积层就是让网络自动学习最优的 Transform 核。

图像处理的本质是 Transform：将像素从一种表示映射到另一种表示，在变换中提取我们关心的信息。