Question

说我有这张图片：

enter image description here

我想识别图像中红球的位置，我可以测量前方球的大小（以像素为单位）。

我知道我可以将图像绘制到画布上，然后我可以使用context.getImageData获取像素颜色数据，但那我该怎么办？我应该使用哪种算法？我是图像处理的新手，非常感谢。

Answer 1

这是专门用于获得球位置的代码。输出位置将记录到控制台，以便打开JS控制台！此代码中包含一些您可以使用的值。我选择了一些适合您图像的图像，例如球的粗糙直径为14像素，以及每种颜色成分的阈值。

我将图像保存为“test.jpg”，但您可以将代码更改为第11行的正确图像路径。

<!DOCTYPE html>
<html>
    <body>
        <canvas width="800" height="600" id="testCanvas"></canvas>
        <script type="text/javascript">
            var img = document.createElement('img');
            img.onload = function () {
                console.log(getBallPosition(this));
            };
            img.src = 'test.jpg';

            function getBallPosition(img) {
                var canvas = document.getElementById('testCanvas'),
                    ctx = canvas.getContext('2d'),
                    imageData,
                    width = img.width,
                    height = img.height,
                    pixelData,
                    pixelRedValue,
                    pixelGreenValue,
                    pixelBlueValue,
                    pixelAlphaValue,
                    pixelIndex,
                    redThreshold = 128,
                    greenThreshold = 40,
                    blueThreshold = 40,
                    alphaThreshold = 180,
                    circleDiameter = 14,
                    x, y,
                    count,
                    ballPosition,
                    closestBallCount = 0,
                    closestBallPosition;

                // Draw the image to the canvas
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);

                // Get the image data
                imageData = ctx.getImageData(0, 0, width, height);
                pixelData = imageData.data;

                // Find the ball!
                for (y = 0; y < height; y++) {
                    // Reset the pixel count
                    count = 0;

                    // Loop through the pixels on this line
                    for (x = 0; x < width; x++) {
                        // Set the pixel data starting point
                        pixelIndex = (y * width * 4) + (x * 4);

                        // Grab the red pixel value
                        pixelRedValue = pixelData[pixelIndex];
                        pixelGreenValue = pixelData[pixelIndex + 1];
                        pixelBlueValue = pixelData[pixelIndex + 2];
                        pixelAlphaValue = pixelData[pixelIndex + 3];

                        // Check if the value is within out red colour threshold
                        if (pixelRedValue >= redThreshold && pixelGreenValue <= greenThreshold && pixelBlueValue <= blueThreshold && pixelAlphaValue >= alphaThreshold) {
                            count++;
                        } else {
                            // We've found a pixel that isn't part of the red ball
                            // so now check if we found any red data
                            if (count === circleDiameter) {
                                // We've found our ball
                                return {
                                    x: x - Math.floor(circleDiameter / 2),
                                    y: y
                                };
                            } else {
                                // Any data we found was not our ball
                                if (count < circleDiameter && count > closestBallCount) {
                                    closestBallCount = count;
                                    closestBallPosition = {
                                        x: x - Math.floor(circleDiameter / 2),
                                        y: y
                                    };
                                }
                                count = 0;
                            }
                        }
                    }
                }

                return closestBallPosition;
            }
        </script>
    </body>
</html>

Answer 2

我会去聚集那种颜色的像素。例如，你可以有一个查找表，你可以在其中存储红色（或在阈值范围内）像素（坐标是查找键），并且每当遇到没有任何已知红色邻居的像素时，整数值就是群集ID它启动一个新的集群，所有其他红色像素获得一个红色像素的集群ID，它们是它们的邻居。根据你的算法内核：

   A) XXX      B)  X
      XOX         XOX
      XXX          X

您可能需要处理（情况B）连接两个先前未连接群集的像素。您必须替换其中一个集群的集群ID。

之后你就拥有像素簇。这些你可以分析。如果是圆形，我会查找每个聚类的x和y中位数，并检查该聚类的所有像素是否都在半径内。

如果红球（或其中一部分）位于另一个红色物体前面，则会失败。您可能需要更复杂的算法。

用JavaScript识别红球在图像中的位置？

2 个答案: