OpenCV.js 透视变换

Question

我正在尝试使用opencv.js在提供的图像中查找文档（检测边缘，应用透视变换等）。我已经有了一套合理的代码（偶尔）可以检测到文档的边缘并获取其边界框。但是，我正在努力执行透视变换步骤。这里有一些帮助器（不是JS）这里和这里。不幸的是，我卡在了一些简单的问题上。我可以找到具有4个边缘的匹配Mat。显示它是准确的。但是，我不知道如何从该Mat中获取一些简单的X/Y信息。我认为minMaxLoc()是一个很好的选择，但我一直收到错误传入我的匹配Mat。您有什么想法，为什么我可以绘制foundContour并从中获取边界框信息，但我无法对其调用minMaxLoc？ 代码：

//<Get Image>
//<Convert to Gray, do GaussianBlur, and do Canny edge detection>
let contours = new cv.MatVector();
cv.findContours(matDestEdged, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);

//<Sort resulting contours by area to get largest>

let foundContour = null;
for (let sortableContour of sortableContours) {
  let peri = cv.arcLength(sortableContour.contour, true);
  let approx = new cv.Mat();
  cv.approxPolyDP(sortableContour.contour, approx, 0.1 * peri, true);

  if (approx.rows == 4) {
    console.log('found it');
    foundContour = approx
    break;
  }
  else {
    approx.delete();
  }
}

//<Draw foundContour and a bounding box to ensure it's accurate>

//TODO: Do a perspective transform
let result = cv.minMaxLoc(foundContour);

上面的最后一行会导致运行时错误 (Uncaught (in promise): 6402256 - 异常捕获被禁用)。我可以在其他 Mat 对象上运行 minMaxLoc()。

- BRass

---

我并不完全理解，但我发现上面的foundContour是一个2通道的Mat对象。看起来minMaxLoc只能用于单通道的Mat。我不确定如何进行转换，但我能够从foundContour.data32S[]数组中获取X/Y数据。可能还有更好的方法，但这是我目前掌握的最好方法。 - BRass

Answer 1

对于其他想在OpenCV.JS中执行此操作的人，我上面评论的内容似乎仍然准确。找到的轮廓无法与minMaxLoc一起使用，但可以从data32S[]中提取X/Y数据。这应该是执行透视变换所需的全部内容。下面是一些代码。

//Find all contours
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(matDest, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);

//Get area for all contours so we can find the biggest
let sortableContours: SortableContour[] = [];
for (let i = 0; i < contours.size(); i++) {
  let cnt = contours.get(i);
  let area = cv.contourArea(cnt, false);
  let perim = cv.arcLength(cnt, false);

  sortableContours.push(new SortableContour({ areaSize: area, perimiterSize: perim, contour: cnt }));
}

//Sort 'em
sortableContours = sortableContours.sort((item1, item2) => { return (item1.areaSize > item2.areaSize) ? -1 : (item1.areaSize < item2.areaSize) ? 1 : 0; }).slice(0, 5);

//Ensure the top area contour has 4 corners (NOTE: This is not a perfect science and likely needs more attention)
let approx = new cv.Mat();
cv.approxPolyDP(sortableContours[0].contour, approx, .05 * sortableContours[0].perimiterSize, true);

if (approx.rows == 4) {
  console.log('Found a 4-corner approx');
  foundContour = approx;
}
else{
  console.log('No 4-corner large contour!');
  return;
}

//Find the corners
//foundCountour has 2 channels (seemingly x/y), has a depth of 4, and a type of 12.  Seems to show it's a CV_32S "type", so the valid data is in data32S??
let corner1 = new cv.Point(foundContour.data32S[0], foundContour.data32S[1]);
let corner2 = new cv.Point(foundContour.data32S[2], foundContour.data32S[3]);
let corner3 = new cv.Point(foundContour.data32S[4], foundContour.data32S[5]);
let corner4 = new cv.Point(foundContour.data32S[6], foundContour.data32S[7]);

//Order the corners
let cornerArray = [{ corner: corner1 }, { corner: corner2 }, { corner: corner3 }, { corner: corner4 }];
//Sort by Y position (to get top-down)
cornerArray.sort((item1, item2) => { return (item1.corner.y < item2.corner.y) ? -1 : (item1.corner.y > item2.corner.y) ? 1 : 0; }).slice(0, 5);

//Determine left/right based on x position of top and bottom 2
let tl = cornerArray[0].corner.x < cornerArray[1].corner.x ? cornerArray[0] : cornerArray[1];
let tr = cornerArray[0].corner.x > cornerArray[1].corner.x ? cornerArray[0] : cornerArray[1];
let bl = cornerArray[2].corner.x < cornerArray[3].corner.x ? cornerArray[2] : cornerArray[3];
let br = cornerArray[2].corner.x > cornerArray[3].corner.x ? cornerArray[2] : cornerArray[3];

//Calculate the max width/height
let widthBottom = Math.hypot(br.corner.x - bl.corner.x, br.corner.y - bl.corner.y);
let widthTop = Math.hypot(tr.corner.x - tl.corner.x, tr.corner.y - tl.corner.y);
let theWidth = (widthBottom > widthTop) ? widthBottom : widthTop;
let heightRight = Math.hypot(tr.corner.x - br.corner.x, tr.corner.y - br.corner.y);
let heightLeft = Math.hypot(tl.corner.x - bl.corner.x, tr.corner.y - bl.corner.y);
let theHeight = (heightRight > heightLeft) ? heightRight : heightLeft;

//Transform!
let finalDestCoords = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, theWidth - 1, 0, theWidth - 1, theHeight - 1, 0, theHeight - 1]); //
let srcCoords = cv.matFromArray(4, 1, cv.CV_32FC2, [tl.corner.x, tl.corner.y, tr.corner.x, tr.corner.y, br.corner.x, br.corner.y, bl.corner.x, bl.corner.y]);
let dsize = new cv.Size(theWidth, theHeight);
let M = cv.getPerspectiveTransform(srcCoords, finalDestCoords)
cv.warpPerspective(matDestTransformed, finalDest, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());

供参考，这是我在使用SortableContour时所定义的类。上面的代码只是作为指南，而不是可以独立运行的东西。

export class SortableContour {
    perimiterSize: number;
    areaSize: number;
    contour: any;
  
    constructor(fields: Partial<SortableContour>) {
      Object.assign(this, fields);
    }
  }

- BRass

---

在这种情况下，matDestTransformed是什么？它是原始图像源吗？ - smchae

我的命名不好。是的，那就是你想要处理的图像源。我从其他处理代码中提取了这个，而在我的情况下它是另一个过程的输出（但是这个过程的输入）。 - BRass

我认为代码中有一个小错误，new sortableContour 应该改为 new SortableContour。 - roccolocko

@BRass，我通过这个找到了很多答案。如果可能的话，您能否请解释一下如何在js中使用skimage.filters的threshold_local函数？ - Yash Sharma

我尝试了你的解决方案。但是，在定义 sortableContours 变量的那一行上，我遇到了错误：let sortableContours: SortableContour[] = []; // SyntaxError: Unexpected token ':'. 如果有其他可行的替代方案，将不胜感激。 - Wisarut Bholsithi