画布：在图像中找到卡片的角落

Question

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

说明

我最初有以下图片......

将它画在画布上并应用了canny边缘检测并得到了这个......

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

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

OR

我在互联网上找到的另一种方式是：

1. 遍历所有边缘并找到已关闭的边缘，然后

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

但是在尝试构建任何逻辑来实现任何方法时，我都变得无能为力。

这是否可以进行边缘检测，并且无法继续进行：

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

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

红色频道图片

接下来，我使用高斯模糊模糊了它。

图像模糊：

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

最终优势：

为了完美裁剪卡片，您必须只找到 ONE 外部轮廓。为此，您可以扩展生成的图像

扩张图片

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

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

（我在python中生成了脚本，但是我发现你已经用javascript编写了代码脚本）