【官网翻译】OpenCV.js基于分水岭算法的图像分割

原文地址：https://docs.opencv.org/3.4/d7/d1c/tutorial_js_watershed.html

 

目标

• 使用分水岭算法进行基于标记的图像分割

• cv.watershed（）

 

理论

任何灰度图像都可以看作是地形表面，其中高强度表示山峰和丘陵，而低强度表示山谷。你开始用不同颜色的水（标签）填充每个孤立的山谷（局部最小值）。随着水位上升，取决于附近的峰值（梯度），来自不同山谷的不同的颜色水将开始融合。为避免这种情况，需要在水合并的位置设置障碍。你得一直进行填补水和设置障碍的工作，直到所有的山峰都在水下。然后，你创建的障碍提供的就是分割结果。这是分水岭背后的“哲学”。你可以访问分水岭上的CMM网页，以便在动画的帮助下了解它。

但是，由于噪声或图像中的任何其他不规则性，此方法会为你提供过度调整结果。因此，OpenCV实现了一个基于标记的分水岭算法，你可以在其中指定要合并的所有谷点，哪些不合并。它是一种交互式图像分割。我们所做的是为我们所知道的对象提供不同的标签。用一种颜色（或强度）标记我们确定为前景或对象的区域，用另一种颜色标记我们确定为背景或非对象的区域，最后标记我们不确定的区域，用0标记它。这是我们的标记。然后应用分水岭算法。然后我们的标记将使用我们给出的标签进行更新，对象的边界将具有-1的值。

 

代码

下面我们将看到一个使用距离变换和分水岭来分割相互接触的物体的示例。考虑下面的硬币图像，硬币互相接触。即使你达到阈值，它也会相互接触。我们首先找到硬币的近似估计值。为此，我们可以使用Otsu的二值化。

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let gray = new cv.Mat();

// 转换成二值图
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);

cv.imshow('canvasOutput', gray);
src.delete(); dst.delete(); gray.delete();

现在我们需要去除图像中的任何小的白噪声。为此，我们可以使用形态学开运算。要移除对象中的任何小孔，我们可以使用形态学闭运算。所以，现在我们确切地知道靠近物体中心的区域是前景，而远离物体的区域是背景。只有我们不确定的区域是硬币的边界区域。

所以我们需要提取我们确定它们是硬币的区域。侵蚀消除了边界像素。所以无论如何，我们可以肯定它是硬币。如果物体没有相互接触，这将起作用。但由于它们相互接触，另一个好的选择是找到距离变换并应用适当的阈值。接下来我们需要找到我们确定它们不是硬币的区域。为此，我们扩大了结果。膨胀将物体边界增加到背景。这样，我们可以确保结果中背景中的任何区域都是背景，因为边界区域已被删除。

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let gray = new cv.Mat();
let opening = new cv.Mat();
let coinsBg = new cv.Mat();

// 转换成二值图
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);

// get background
let M = cv.Mat.ones(3, 3, cv.CV_8U);       //  结构元素
cv.erode(gray, gray, M);
cv.dilate(gray, opening, M);
cv.dilate(opening, coinsBg, M, new cv.Point(-1, -1), 3);

cv.imshow('canvasOutput', coinsBg);
src.delete(); dst.delete(); gray.delete(); opening.delete(); coinsBg.delete(); M.delete();

剩下的区域是我们不知道的区域，无论是硬币还是背景。分水岭算法应该找到它。这些区域通常围绕着前景和背景相遇的硬币边界（甚至两个不同的硬币相遇）。我们称之为边界。它可以从sure_bg区域中减去sure_fg区域获得。

我们使用这个函数：cv.distanceTransform (src, dst, distanceType, maskSize, labelType = cv.CV_32F)

参数说明

src - 8位，单通道（二进制）源图像。

dst - 输出具有计算距离的图像。它是一个8位或32位浮点单通道图像，大小与src相同。

distanceType - 距离类型（参见 cv.DistanceTypes）。

maskSize - 距离变换掩码的大小，（参见 cv.DistanceTransformMasks）。

labelType - 输出图像的类型。它可以是cv.CV_8U或cv.CV_32F。类型cv.CV_8U只能用于函数的第一个变量而distanceType == DIST_L1。

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let gray = new cv.Mat();
let opening = new cv.Mat();
let coinsBg = new cv.Mat();
let coinsFg = new cv.Mat();
let distTrans = new cv.Mat();

// 转换成二值图
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);

let M = cv.Mat.ones(3, 3, cv.CV_8U);
cv.erode(gray, gray, M);
cv.dilate(gray, opening, M);
cv.dilate(opening, coinsBg, M, new cv.Point(-1, -1), 3);

// distance transform
cv.distanceTransform(opening, distTrans, cv.DIST_L2, 5);
cv.normalize(distTrans, distTrans, 1, 0, cv.NORM_INF);

cv.imshow('canvasOutput', distTrans);
src.delete(); dst.delete(); gray.delete(); opening.delete();
coinsBg.delete(); coinsFg.delete(); distTrans.delete(); M.delete();

在阈值图像中，我们得到了一些我们确定硬币的硬币区域，现在它们已经分离。（在某些情况下，你可能只对前景分割感兴趣，而不是分离相互接触的物体。在这种情况下，你不需要使用距离变换，只需要侵蚀就足够了。侵蚀只是提取确定前景区域的另一种方法，那就是所有）

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let gray = new cv.Mat();
let opening = new cv.Mat();
let coinsBg = new cv.Mat();
let coinsFg = new cv.Mat();
let distTrans = new cv.Mat();

// 转换成二值图
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);

let M = cv.Mat.ones(3, 3, cv.CV_8U);
cv.erode(gray, gray, M);
cv.dilate(gray, opening, M);
cv.dilate(opening, coinsBg, M, new cv.Point(-1, -1), 3);

cv.distanceTransform(opening, distTrans, cv.DIST_L2, 5);
cv.normalize(distTrans, distTrans, 1, 0, cv.NORM_INF);

// get foreground
cv.threshold(distTrans, coinsFg, 0.7 * 1, 255, cv.THRESH_BINARY);

cv.imshow('canvasOutput', coinsFg);
src.delete(); dst.delete(); gray.delete(); opening.delete();
coinsBg.delete(); coinsFg.delete(); distTrans.delete(); M.delete();

现在我们确定哪个是硬币区域，哪个是背景和所有。所以我们创建标记（它是一个与原始图像大小相同的数组，但是使用int32数据类型）并标记其中的区域。我们确切知道的区域（无论是前景还是背景）都标有任何正整数，但不同的整数，我们不确定的区域只是保留为零。为此，我们使用cv.connectedComponents()。它用0标记图像的背景，然后其他对象用从1开始的整数标记。

但我们知道，如果背景标记为0，分水岭会将其视为未知区域。所以我们想用不同的整数来标记它。相反，我们将用0表示由未知定义的未知区域。

现在我们的标记准备好了。现在是最后一步的时候，应用分水岭。然后将修改标记图像。边界区域将标记为-1。

我们使用这个函数：cv.connectedComponents (image, labels, connectivity = 8, ltype = cv.CV_32S)

参数说明

image - 要标记的8位单通道图像。

labels - 目标标记图像（cv.CV_32SC1类型）。

connectivity - 8或4分别用于8路或4路连接。

ltype - 输出图像标签类型。目前支持cv.CV_32S和cv.CV_16U。

 

我们使用这个函数：cv.watershed (image, markers)

参数说明

image - 输入8位3通道图像。

markers - 输入/输出标记的32位单通道图像（映射）。它应该与图像大小相同。

最终代码和结果如下所示：

let src = cv.imread('canvasInput');        // 原图像
let dst = new cv.Mat();
let gray = new cv.Mat();
let opening = new cv.Mat();
let coinsBg = new cv.Mat();                // 背景图像
let coinsFg = new cv.Mat();                // 前景图像
let distTrans = new cv.Mat();
let unknown = new cv.Mat();
let markers = new cv.Mat();

// 转换成二值图
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);

// 开运算
let M = cv.Mat.ones(3, 3, cv.CV_8U);
cv.erode(gray, gray, M);
cv.dilate(gray, opening, M);

// 计算背景
cv.dilate(opening, coinsBg, M, new cv.Point(-1, -1), 3);

// 距离变换
cv.distanceTransform(opening, distTrans, cv.DIST_L2, 5);
cv.normalize(distTrans, distTrans, 1, 0, cv.NORM_INF);

// 计算前景
cv.threshold(distTrans, coinsFg, 0.7 * 1, 255, cv.THRESH_BINARY);

coinsFg.convertTo(coinsFg, cv.CV_8U, 1, 0);
cv.subtract(coinsBg, coinsFg, unknown);

// get connected components markers
cv.connectedComponents(coinsFg, markers);
for (let i = 0; i < markers.rows; i++) {
    for (let j = 0; j < markers.cols; j++) {
        markers.intPtr(i, j)[0] = markers.ucharPtr(i, j)[0] + 1;
        if (unknown.ucharPtr(i, j)[0] == 255) {
            markers.intPtr(i, j)[0] = 0;
        }
    }
}
cv.cvtColor(src, src, cv.COLOR_RGBA2RGB, 0);
cv.watershed(src, markers);

// 画出边界
for (let i = 0; i < markers.rows; i++) {
    for (let j = 0; j < markers.cols; j++) {
        if (markers.intPtr(i, j)[0] == -1) {
            src.ucharPtr(i, j)[0] = 255; // R
            src.ucharPtr(i, j)[1] = 0; // G
            src.ucharPtr(i, j)[2] = 0; // B
        }
    }
}
cv.imshow('canvasOutput', src);
src.delete(); dst.delete(); gray.delete(); opening.delete(); coinsBg.delete();
coinsFg.delete(); distTrans.delete(); unknown.delete(); markers.delete(); M.delete();