は、私はこのイメージを持っていると言う：JavaScriptで画像内の赤いボールの位置を認識していますか？
私は画像の赤のボールの位置を認識したいのですが、私は先に（ピクセルで）ボールの大きさを測定することができます。
私はキャンバスにイメージを描くことができることを知って、私はcontext.getImageDataでピクセルの色データを得ることができるが、その後、私は何をすべきでしょうか？どのアルゴリズムを使うべきですか？私は画像処理に新しいです、ありがとうございます。
まあ、私はその色のピクセルを移動して、クラスタでしょう。たとえば、赤色（またはしきい値の範囲内）のピクセル（ルックアップキーである座標）を格納するルックアップテーブルと、既知の赤色の隣接ピクセルがないピクセルに出会うたびにクラスタIDである整数値を持つことができますそれは新しいクラスターを開始し、他のすべての赤色ピクセルは、それらが隣人である赤色ピクセルのクラスターIDを取得します。あなたのアルゴリズムに応じて、カーネルに応じて：
以前の2つの接続されていないクラスターを接続するピクセルで（ケースB）処理する必要があります。そのクラスタの1つのクラスタIDを置き換える必要があります。
は、その後、あなたは、ピクセルのクラスタを持っています。これらはあなたが分析することができます。円形の場合は、各クラスタのxとyの中央値を探し、そのクラスタのすべてのピクセルが半径内にあるかどうかを確認します。
赤いボール（またはその一部）は、別の赤色のオブジェクトの前にある場合、これは失敗します。より複雑なアルゴリズムが必要になるでしょう。
は、ここでそのボールの位置を取得する専用のコードです。出力位置はコンソールに記録されますので、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>
に正しい画像パスにコードを変更することができますが、我々が想定している、ボールの色は、他の（ユニークではありませんその色のオブジェクト）？ボールの大きさは先に – snies
@sniesはありません、それはだが、我々は色や形状のみ（及びサイズ）を知っていますか？ – wong2
測定されている理由 – snies