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

目次

1. 概要
2. 色相によるカラートラッキングq70
3. マスクを画像へ適用するq71
4. マスクを形態学的変換で整えるq72
5. まとめ

概要

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

色相によるカラートラッキング（Q.70）

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

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

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

マスクを画像へ適用する（Q.71）

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

マスクを形態学的変換で整える（Q.72）

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

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

• Q.70〜72のデモ
• Ans070.ts〜Ans072.ts
• 画像のHSV変換 JavaScript + canvas

まとめ

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