如何在OpenCV JS中正确排序srcPoints以保证变换图像方向一致？

要解决选点顺序导致的图像方向翻转问题，核心是将任意顺序的四个角点重新整理为左上→右上→右下→左下的固定顺序，具体实现步骤如下：

排序逻辑实现 #

先将一维的点数组转换为可操作的坐标对象，再通过坐标特征排序：

1. 把输入的一维srcPoints（格式[x1,y1,x2,y2,x3,y3,x4,y4]）转换为包含{x,y}的对象数组
2. 按y坐标升序排序，分离出顶部两个点（y值小）和底部两个点（y值大）
3. 顶部两点按x坐标升序，得到左上（x小）、右上（x大）
4. 底部两点按x坐标降序，得到右下（x大）、左下（x小）
5. 将排序后的点转回一维数组，用于生成透视变换的源矩阵

修改后的完整代码 #

export function transformPerspective({
  originalImage,
  padding,
  srcPoints,
}: TransformPerspective): Promise<HTMLImageElement> {
  return new Promise((resolve) => {
    let img = new Image();
    img.id = "konvaImage";
    img.src = originalImage;
    img.style.display = "none";
    document.body.appendChild(img);

    img.onload = () => {
      // 新增点排序函数
      function sortSrcPoints(points) {
        // 转换为坐标对象数组
        const pointObjects = [];
        for (let i = 0; i < points.length; i += 2) {
          pointObjects.push({
            x: points[i],
            y: points[i + 1]
          });
        }

        // 按y坐标升序，区分顶部和底部点
        pointObjects.sort((a, b) => a.y - b.y);

        // 顶部两点按x升序，得到左上、右上
        const topPoints = pointObjects.slice(0, 2).sort((a, b) => a.x - b.x);
        const topLeft = topPoints[0];
        const topRight = topPoints[1];

        // 底部两点按x降序，得到右下、左下
        const bottomPoints = pointObjects.slice(2, 4).sort((a, b) => b.x - a.x);
        const bottomRight = bottomPoints[0];
        const bottomLeft = bottomPoints[1];

        // 转回一维数组格式
        return [
          topLeft.x, topLeft.y,
          topRight.x, topRight.y,
          bottomRight.x, bottomRight.y,
          bottomLeft.x, bottomLeft.y
        ];
      }

      // 使用排序后的点生成源矩阵
      const sortedSrcPoints = sortSrcPoints(srcPoints);
      let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, sortedSrcPoints);
      
      const dstWidth = 900;
      const dstHeight = 1000;

      let dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [
        padding,
        padding,
        dstWidth - padding,
        padding,
        dstWidth - padding,
        dstHeight - padding,
        padding,
        dstHeight - padding,
      ]);

      let matrix = cv.getPerspectiveTransform(srcTri, dstTri);
      let dsize = new cv.Size(dstWidth, dstHeight);
      let myimg = cv.imread(
        document.querySelector("#konvaImage") as HTMLImageElement
      );
      let warpedImage = new cv.Mat();
      cv.warpPerspective(myimg, warpedImage, matrix, dsize);

      const outputCanvas = document.createElement("canvas");
      outputCanvas.id = "outputCanvas";
      outputCanvas.width = 900;
      outputCanvas.height = 1000;
      outputCanvas.style.display = "none";
      document.body.append(outputCanvas);

      cv.imshow("outputCanvas", warpedImage);
      const imageFromCanvas = new window.Image();
      imageFromCanvas.src = outputCanvas.toDataURL();

      // cleanup
      myimg.delete();
      warpedImage.delete();
      matrix.delete();
      srcTri.delete();
      dstTri.delete();
      outputCanvas.remove();

      // used to update my canvas image
      resolve(imageFromCanvas);
    };
  });
}

说明 #

• 该排序逻辑依赖四个角点的基本位置特征：顶部点的y坐标明显小于底部点，左右点的x坐标差异明显，适用于常规的矩形选点场景
• 如果遇到特殊场景（如点的y坐标接近），可以结合计算点到图像中心的距离或向量方向进一步优化排序逻辑

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