モルフォロジー処理をCanvasで実装する―膨張・収縮・形態学的変換【画像処理100本ノック】

概要

Q.47〜55では、画素の近傍関係から形を整えるモルフォロジー処理を実装します。二値画像の膨張・収縮を基本として、ノイズ除去、穴埋め、境界や小領域の抽出へ発展させます。

問題	処理	結果
Q.47 膨張	4近傍に前景があれば注目画素も前景にする	白い領域が広がる
Q.48 収縮	4近傍に背景があれば注目画素も背景にする	白い領域が縮む

実装では入力と出力を別のバッファにします。同じバッファを読み書きすると、先に更新した画素が後続画素の判定へ混ざり、1回の処理で必要以上に領域が変化するためです。

問題	処理順	用途
Q.49 オープニング	収縮→膨張	大きな形を保ちながら小さな前景ノイズを消す
Q.50 クロージング	膨張→収縮	前景内部の小さな穴や切れ目を埋める

繰り返し回数を増やすほど除去・補完できる領域は大きくなりますが、残したい形も変わります。

膨張・収縮の出力を最終結果にするだけでなく、原画像との差を取ることで、構造要素より小さい特徴だけを取り出せます。

二値画像では前景・背景の論理条件として説明できます。グレースケール画像では、膨張を近傍の最大値、収縮を近傍の最小値として実装します。この定義を使えばトップハットとブラックハットを濃淡画像へ適用できます。

構造要素は「近傍のどの位置を見るか」を表す座標オフセットの配列にすると、十字、正方形、円形を同じ走査コードで扱えます。構造要素が大きいほど太い線を残したり大きな穴を埋めたりできますが、細部も失われます。

const cross = [
  [0, -1],
  [-1, 0],
  [0, 0],
  [1, 0],
  [0, 1],
] as const;

二値画像では前景を0/1へ正規化してから論理条件を適用します。RGBAの255をそのまま足し合わせる実装と混在させないことが重要です。グレースケールでは同じオフセットを使い、最大値・最小値を選びます。

膨張や収縮を複数回適用するときは、各反復の入力を固定し、別バッファへ結果を書いてから交換します。走査中に同じ配列を更新すると、左上から右下へ処理した場合だけ一方向へ領域が伸びる、といった走査順依存の不具合が起きます。

オープニングやクロージングは同じ回数・同じ構造要素で構成し、入力、途中結果、最終結果を並べて表示すると、ノイズ除去と形状変化の境界を確認できます。

モルフォロジー処理はカーネルとの積和ではなく、近傍の最大・最小や前景・背景の接続を扱います。膨張と収縮を部品として理解すると、オープニング以降の処理は「適用順」と「どの差を取るか」で整理できます。