如何在非WEBGL环境下用p5.js将图像四角适配任意二维四点？

可以实现，核心思路是利用**透视变换（Homography）**结合p5.js的像素操作API，绕过WEBGL的texture函数限制。以下是两种可行方案：

方案一：逐像素透视映射（高精度） #

通过计算透视变换的逆矩阵，遍历目标四边形区域内的每个画布点，采样原图像对应位置的像素并绘制。这种方法能得到最精准的变形效果，适合对精度要求高的场景。

完整代码示例 #

let img;
// 目标四点：按顺时针顺序定义（左上、右上、右下、左下）
let targetPoints = [];

function preload() {
  img = loadImage('your-image-path.jpg'); // 替换为你的图像路径
}

function setup() {
  createCanvas(800, 600);
  // 初始化示例目标四点，可根据需求修改
  targetPoints = [
    createVector(100, 100),
    createVector(700, 150),
    createVector(650, 500),
    createVector(150, 450)
  ];
}

function draw() {
  background(220);
  drawPerspectiveImage(img, targetPoints);
}

// 核心函数：绘制透视变形后的图像
function drawPerspectiveImage(img, dstPoints) {
  // 原图像的四个角点
  const srcPoints = [
    createVector(0, 0),
    createVector(img.width, 0),
    createVector(img.width, img.height),
    createVector(0, img.height)
  ];
  
  // 计算从目标点映射回原图像的逆透视矩阵
  const invMatrix = calculateInversePerspectiveMatrix(srcPoints, dstPoints);
  if (!invMatrix) return;
  
  // 获取目标四边形的包围盒，减少不必要的像素遍历
  const minX = min(dstPoints.map(p => p.x));
  const maxX = max(dstPoints.map(p => p.x));
  const minY = min(dstPoints.map(p => p.y));
  const maxY = max(dstPoints.map(p => p.y));
  
  img.loadPixels();
  loadPixels();
  
  // 遍历包围盒内的每个点
  for (let x = minX; x <= maxX; x++) {
    for (let y = minY; y <= maxY; y++) {
      // 检查当前点是否在目标四边形内
      if (pointInQuad(x, y, dstPoints)) {
        // 计算该点在原图像中的对应位置（齐次坐标转换）
        const srcPos = applyMatrix(invMatrix, createVector(x, y));
        // 确保采样位置在原图像范围内
        if (srcPos.x >= 0 && srcPos.x < img.width && srcPos.y >= 0 && srcPos.y < img.height) {
          // 双线性采样获取平滑像素颜色
          const pixelColor = getBilinearPixel(img, srcPos.x, srcPos.y);
          set(x, y, pixelColor);
        }
      }
    }
  }
  
  updatePixels();
}

// 计算透视变换的逆矩阵
function calculateInversePerspectiveMatrix(src, dst) {
  // 构建线性方程组求解透视变换矩阵
  let matrixA = [];
  for (let i = 0; i < 4; i++) {
    const [sx, sy] = [src[i].x, src[i].y];
    const [dx, dy] = [dst[i].x, dst[i].y];
    matrixA.push([sx, sy, 1, 0, 0, 0, -dx*sx, -dx*sy]);
    matrixA.push([0, 0, 0, sx, sy, 1, -dy*sx, -dy*sy]);
  }
  
  const vectorB = [];
  for (let i = 0; i < 4; i++) {
    vectorB.push(dst[i].x);
    vectorB.push(dst[i].y);
  }
  
  // 解线性方程组得到变换矩阵元素
  const solution = solveLinearSystem(matrixA, vectorB);
  if (!solution) return null;
  
  // 构造原透视变换矩阵
  const transformMatrix = [
    [solution[0], solution[1], solution[2]],
    [solution[3], solution[4], solution[5]],
    [solution[6], solution[7], 1]
  ];
  
  // 计算逆矩阵
  return matrixInverse(transformMatrix);
}

// 高斯消元法解线性方程组（针对8未知数场景）
function solveLinearSystem(augMatrix, bVector) {
  const n = 8;
  // 构建增广矩阵
  let aug = [];
  for (let i = 0; i < n; i++) {
    aug.push([...augMatrix[i], bVector[i]]);
  }
  
  // 高斯消元过程
  for (let col = 0; col < n; col++) {
    // 寻找主元行
    let pivotRow = col;
    for (let row = col; row < n; row++) {
      if (abs(aug[row][col]) > abs(aug[pivotRow][col])) {
        pivotRow = row;
      }
    }
    // 交换主元行与当前行
    [aug[col], aug[pivotRow]] = [aug[pivotRow], aug[col]];
    
    // 归一化主元行
    const divisor = aug[col][col];
    if (abs(divisor) < 1e-8) return null; // 矩阵奇异，无解
    for (let j = col; j <= n; j++) {
      aug[col][j] /= divisor;
    }
    
    // 消去其他行的当前列
    for (let row = 0; row < n; row++) {
      if (row !== col && abs(aug[row][col]) > 1e-8) {
        const factor = aug[row][col];
        for (let j = col; j <= n; j++) {
          aug[row][j] -= factor * aug[col][j];
        }
      }
    }
  }
  
  // 提取解
  const solution = [];
  for (let i = 0; i < n; i++) {
    solution.push(aug[i][n]);
  }
  return solution;
}

// 计算3x3矩阵的逆矩阵
function matrixInverse(mat) {
  // 计算行列式
  const det = mat[0][0]*(mat[1][1]*mat[2][2] - mat[1][2]*mat[2][1]) -
              mat[0][1]*(mat[1][0]*mat[2][2] - mat[1][2]*mat[2][0]) +
              mat[0][2]*(mat[1][0]*mat[2][1] - mat[1][1]*mat[2][0]);
  
  if (abs(det) < 1e-8) return null;
  
  const invDet = 1 / det;
  // 构造逆矩阵
  return [
    [
      (mat[1][1]*mat[2][2] - mat[1][2]*mat[2][1])*invDet,
      (mat[0][2]*mat[2][1] - mat[0][1]*mat[2][2])*invDet,
      (mat[0][1]*mat[1][2] - mat[0][2]*mat[1][1])*invDet
    ],
    [
      (mat[1][2]*mat[2][0] - mat[1][0]*mat[2][2])*invDet,
      (mat[0][0]*mat[2][2] - mat[0][2]*mat[2][0])*invDet,
      (mat[0][2]*mat[1][0] - mat[0][0]*mat[1][2])*invDet
    ],
    [
      (mat[1][0]*mat[2][1] - mat[1][1]*mat[2][0])*invDet,
      (mat[0][1]*mat[2][0] - mat[0][0]*mat[2][1])*invDet,
      (mat[0][0]*mat[1][1] - mat[0][1]*mat[1][0])*invDet
    ]
  ];
}

// 应用3x3矩阵到点（齐次坐标转换）
function applyMatrix(mat, point) {
  const x = mat[0][0]*point.x + mat[0][1]*point.y + mat[0][2];
  const y = mat[1][0]*point.x + mat[1][1]*point.y + mat[1][2];
  const w = mat[2][0]*point.x + mat[2][1]*point.y + mat[2][2];
  return createVector(x/w, y/w);
}

// 射线法判断点是否在四边形内
function pointInQuad(x, y, quad) {
  let inside = false;
  for (let i = 0, j = quad.length - 1; i < quad.length; j = i++) {
    const xi = quad[i].x, yi = quad[i].y;
    const xj = quad[j].x, yj = quad[j].y;
    
    const intersects = ((yi > y) !== (yj > y)) &&
                      (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersects) inside = !inside;
  }
  return inside;
}

// 双线性采样获取像素，提升图像平滑度
function getBilinearPixel(img, x, y) {
  const x1 = floor(x);
  const x2 = x1 + 1;
  const y1 = floor(y);
  const y2 = y1 + 1;
  
  const fx = x - x1;
  const fy = y - y1;
  
  // 获取四个相邻像素的颜色
  const c1 = img.get(x1, y1);
  const c2 = img.get(x2, y1);
  const c3 = img.get(x1, y2);
  const c4 = img.get(x2, y2);
  
  // 双线性插值计算最终颜色
  const r = lerp(lerp(red(c1), red(c2), fx), lerp(red(c3), red(c4), fx), fy);
  const g = lerp(lerp(green(c1), green(c2), fx), lerp(green(c3), green(c4), fx), fy);
  const b = lerp(lerp(blue(c1), blue(c2), fx), lerp(blue(c3), blue(c4), fx), fy);
  const a = lerp(lerp(alpha(c1), alpha(c2), fx), lerp(alpha(c3), alpha(c4), fx), fy);
  
  return color(r, g, b, a);
}

关键说明 #

• 透视变换矩阵：通过解线性方程组计算原图像与目标四边形之间的映射关系，逆矩阵用于从目标画布点反推原图像的采样位置。
• 包围盒遍历：只处理目标四边形周围的区域，减少无效计算。
• 双线性采样：避免像素变形后的锯齿感，让图像更平滑。

方案二：网格细分采样（性能优先） #

对于需要实时交互的场景，逐像素方案可能卡顿，可以将原图像拆分为N×N的小网格，对每个网格计算透视变换后的四个角，然后对每个小网格区域做局部的像素采样绘制。这种方法通过减少计算量提升性能，网格数量可根据需求调整。

核心思路 #

1. 将原图像划分为固定大小的小矩形网格。
2. 对每个小网格的四个角，计算它们在目标四边形中的透视变换位置。
3. 遍历每个小网格的包围盒，采样原图像对应区域的像素，绘制到变换后的小四边形内。
4. 网格越密集，效果越接近真实透视，性能消耗也越高。

优化提示 #

• 只在目标点变化时重新计算变换矩阵，避免draw()循环中重复计算。
• 增大网格尺寸（比如从10×10改为20×20）可大幅提升性能。

注意事项 #

• 目标四点必须按顺时针或逆时针顺序定义，否则透视变换会出现翻转或错误。
• 逐像素方案精度最高，但大图像（如1000×1000以上）可能导致帧率下降，可考虑缩小图像尺寸或使用网格细分方案。
• 若目标四点共线或无法构成凸四边形，透视变换会失效，需确保输入的四点是有效的凸四边形。

内容的提问来源于stack exchange，提问作者ColeBechtel