地図画像上の記号判別（Opencv.js、またはその他）機能の開発方針について

Question

前提・実現したいこと

Opencv.jsを使った地図画像上の記号識別 -> 判定

下のサンプル地図が複数存在し、其々の地図上に3種類の記号（ドット、円形、灰色矩形）とその組合せがあります。対象地図画像から記号の位置と組合せ判別を目的としています。

前提条件

1. 地図上のグリッドの位置やサイズ，傾き等は処理対象画像に依らずに常に固定である

発生している問題・エラーメッセージ

Opencv.jsについて調べつつ実装を行っていますが、どのようなアプローチ（matchTemplate, findContour, Cascade等）が効率的なのか、見識をお持ちの方からアドバイスを頂きたいと思っています。
また、この程度の識別処理ならOpencvに頼らずとも実現可能な方法があれば教えて頂きたいです。

宜しくお願いします。

Comments

[fana]

処理方針を考えるには，
処理を行う際に利用可能な知識や処理画像に存在する前提等がどうなっているのか？
という点が必要でしょう．

例えば，提示画像にはグリッド線のようなものが存在しているように見えますが，
「そのグリッドの位置やサイズ，傾き等は処理対象画像に依らずに常に固定である」という前提が存在するとすれば，
パターンの有無を調べるべき位置もパターンのサイズも固定されるため，処理は簡単になるでしょう．
「グリッドの位置やサイズは画像次第だが，必ずグリッドは存在し，傾いてはいない/傾いているかもしれない」という前提条件であれば，まずは「調べるべき位置やパターンのサイズ」を与えれた画像から推定することから始めねばならないでしょう．（グリッド線を認識するような処理によって）

[fana]

上記の例のように，誰かがその画像を見て「グリッド」に着目して物事を考え始めたのに，
「いやいや，グリッド線はたまたまこの画像に存在するだけで，実際の処理画像にはそんなのは存在しないし，パターンがマスの中央に存在する的な話なわけでもない」ということになれば，話は全く白紙に戻ることになりますよね．

…というわけで，前提条件を明確にされると良いかと思います．

[aka25]

アドバイスありがとうございます。
前提条件を追加しました。

Answer 1

地図上のグリッドの位置やサイズ，傾き等は処理対象画像に依らずに常に固定である

という前提であれば，

• 記号の有無をチェックすべき場所
• 記号の大きさ

等は固定（決め打ち）で処理できることになりますから，グリッドの各マスの領域に関して，シンプルに記号の有無を判定すれば良いわけですね．

matchTemplate, findContour, Cascade等

を持ち出すような話でもないように思います．

(1)グレー矩形か否か
マス内に白い（「グレー」よりも優位に明るい）画素が存在するか？　に基づき判定できるでしょう．
（マスがグレーであれば理想的には白い画素は無いハズ）

画像にノイズが乗り得るだとか，何らかの理由で「理想」通りにいかないことが想定されるにしても，「白画素の存在数がいくつ以下だったら」程度の判定で対処できるのではないかと想像します．

(2)円，ドットの有無
「そのマスに円やドットがある場合には，マス内のこの部分が黒になっているハズ」という方向でのチェックを行えばよいでしょう．
（最も単純には，２値化して，固定座標の画素群の画素値をチェックする感じですかね）

パターン形状が全て円形なので，
（マス内の全画素の画素値を使う形で）マスの中心からの距離ごとの輝度の統計値（平均とか）を見るような方法もあり得るとは思いますが，地形部分が雑音としてどの程度働くかわからないので，まずは前期の単純な決め打ちの位置の画素群だけを見る方法を試すのが良いかと思います．

Comments

[fana]

いい感じの円形の池とか湖とかが存在したりするような嫌な場面のことを考えなければ，
とりあえず円周上のN箇所（8点とか16点とか）が黒いことをチェックするくらいで良いのではないかな，と．

[aka25]

丁寧なご回答ありがとうございます。やはりOpencv.jsを持ちだす程のことではないのですね。

アドバイスの内容を実現する為に、canvasからimage dataを取得して処理する方向でやってみます。
（Opencv.jsを触ってみたかったとうい動機もあって、簡単な課題の割にオーバーなライブラリを使用していました）

Opencv.jsでは２値化までは出来たのですが、「特定座標の画素群の画素値」取得がスマートにできませんでした。公式ドキュメントも確認していますが、うまく理解できていません。
何か良い情報ソースがあれば教えて頂けると助かります。

[fana]

Opencv.js　というのを使ったことが無いので自身ではお答えできませんが，
https://docs.opencv.org/3.4/de/d06/tutorial_js_basic_ops.html
の "Accessing and Modifying pixel values " あたりが参考にできませんでしょうか．

別の手段と比較して画像の読み込みや画素へのアクセス等が楽にならないのであれば，この回答内容の処理程度であれば， OpenCV を使わなくても済む程度の処理内容かもしれませんね．

[aka25]

ソースの提示ありがとうございます。
とても助かりました。