javascript - Canvas : Find corners of a card in Image

Question

我的目标是从图像中提取任何卡片..

描述:

我最初有以下图像...

将其绘制在 Canvas 上并应用精明的边缘检测并得到这个..

我希望得到的结果应该类似于:

要从图像中提取卡片，我需要找到卡片的 Angular 点。

或者

我在互联网上找到的另一种方法是:

1. 遍历所有边并找到闭合边，然后

2. 找到最大的闭合边缘并进行相应的裁剪。

但是在尝试构建任何逻辑来实现任何方法时我变得毫 headless 绪。

这样做是为了获得边缘检测，但无法进一步继续:

var img = new Image();
img.src = "bcard.png";
img.onload = function() {
    var canv = document.getElementById("canv");
    var ctx = canv.getContext("2d");
    canv.height = img.height;
    canv.width = img.width;
    ctx.drawImage(img,0,0);
    window.canny = CannyJS.canny(canv); //included a js script to do canny edge detection
    canny.drawOn(canv);

}

Answer 1

首先，我从提供的图像中提取了红色 channel 。

红色 channel 图像:

接下来，我应用高斯模糊对其进行模糊处理。

图像模糊:

最后，我进行了边缘检测以获得以下结果。

最终边缘:

为了完美裁剪卡片，您必须仅找到一个外部轮廓。为此，您需要放大生成的图像

放大图像:

现在你必须找到轮廓。找到存在的外部轮廓。在这种情况下，您只会找到一个轮廓。围绕该轮廓绘制一个边界矩形。

使用边界矩形的坐标，裁剪图像:

(我有 python 生成的脚本，但我看到您已经用 javascript 编写了代码脚本)