HSVカラートラッキングとマスク処理をCanvasで実装する【画像処理100本ノック】

概要

Q.70〜72では、HSVの色相を使って対象色を抽出し、二値マスクとして画像へ適用します。最後にモルフォロジー処理でマスクのノイズと穴を整えます。

RGBをHSVへ変換し、青に対応する色相範囲の画素を255、それ以外を0にします。RGB値は明るさで 3成分とも変わりますが、HSVの色相は「何色か」を分離して扱えます。

const [h] = rgbToHsv(r, g, b);
mask[index] = lowerHue <= h && h <= upperHue ? 255 : 0;

色相は0度と360度が連続するため、赤のように境界をまたぐ色を抽出する場合は範囲判定を 2つに分ける必要があります。

マスクが前景の画素だけ元画像を残し、背景画素を0にします。RGB各成分へ同じマスク条件を使うことで、対象色の領域だけを表示できます。

色の閾値だけでは、小さな孤立ノイズや前景内部の穴が残ります。クロージングで穴を埋め、オープニングで孤立した前景を除去してから元画像へ適用します。

色相による二値化
  ↓
クロージング（穴を埋める）
  ↓
オープニング（孤立ノイズを消す）
  ↓
元画像へマスクを適用

RGBを0〜1へ正規化し、最大値max、最小値min、差deltaを求めます。明度Vはmax、彩度Sはmax === 0なら0、それ以外はdelta / maxです。色相Hは最大のチャンネルによって式を切り替え、最後に0〜360度へ正規化します。

無彩色ではdelta === 0となり、色相を計算できません。この場合はH = 0など一定値へします。赤色は色相環の0度をまたぐため、「340度以上または20度未満」のようにOR条件で範囲を表します。

まず色相だけで候補を可視化し、次に彩度の下限で灰色や白い領域を除き、明度の範囲で暗部・反射を調整します。いきなり3条件を同時に変えるより、各マスクと画素数を表示した方が原因を追いやすくなります。

照明条件が大きく変わる環境では固定閾値だけでは安定しません。色見本から範囲を推定する、ホワイトバランスを補正する、連結成分の面積や形状も使う、といった次段の処理が必要です。

カラートラッキングは色空間による領域抽出、マスキングは抽出結果の利用、モルフォロジー処理は二値マスクの品質改善という役割です。複数の基本処理をパイプラインとして組み合わせる例になっています。