Q&A
今回の件は、サンプルのように丸い図形があるだけですか？もっと複雑な形していたり等間隔では無いとか。書かれている走査線も真っ直ぐには引けない可能性があるなら別のアルゴリズムを考える必要が有ります。
中心部に近い最も近い要素の範囲を抽出したい
任意の画像に対し、中心部に近い要素の範囲を取得したいと考えています。
環境はjavascriptを中心としたもので実現したいと考えています。
私は、プログラマーや画像解析の専門でもありませんが、自分なりに調べ
このようなロジックでできるのではないかと思ったのが以下の説明です。
図の説明
切り抜き範囲を取得したいのは左上図の中心の赤丸になります。
（切り抜きは範囲は長方形）
１．まずは画像を二値化（二階調）にすることで、要素（黒）と要素ではない部分（白）に分けます。
２．青い☓は中心点の把握の為に表示しています。次に
2-1 黒に干渉されない縦横の走査線（水色）をひき、９つに要素分けされたうち、中心要素の範囲（緑）を取得。
もしくは、
2-2 中心要素の領域を割り出し、その頂点を取得する
で、目的を達成させたいと考えています。
１．部分はcanvasなり、openCV.jsという技術でできそうな気がします。
問題は２．でして、
画像を解析 ▶ 中心要素を認識 ▶ 範囲を取得
これに関しては手段がわかりません。
どなたか、わかりやすくご教授いただけましたら幸いです。
実現させるための環境
HTML/Canvas/SVG
javascript
JQuery
OpenCV.js系
PHP（可能であれば避けたい）
回答4件
0
ベストアンサー
- ラベリングして、各図形の重心を求める。
- 各重心で中央に一番近いものをターゲットとする
3 ターゲットの色をしらべる
な感じだと思いますが問題も。
凹んだ図形だと重心が図形の外になるかも→重心だからはみ出る可能性は有りますよね。凹図形で図形からはみ出ない点で何か適切なもの有るんですかね？
投稿2018/07/27 00:40
編集2018/07/27 01:23総合スコア2826
ありがとうございます
ラベリング、ですね。これも調べます
ターゲットの色を要らべるのはなぜでしょうか
凹んだ図形は考えていませんでしたね。むしろ文字になる可能性が大きいですが
うまく文字の領域を選出できたらと考えてます。
>任意の画像に対し、中心部に近い要素を範囲を取得したいと考えています。
要素を、のと図示してある内容で縁赤丸が有ったので。色をしらべると誤読してました。
分かりづらくてすみません
なんせ、語学力がなく、図示したのですがそれも分かりづらいというおそまつさでもうしわけございません
回答に書いたリンク先を見ると分かりやすいですよ。
中心に一番近いものを取るだけなら上記1,2でいけると思います。
読解力弱くてスミマセンでした。よく誤爆してます。
リンク先は多分c++で書かれてます。
しかし使う関数やメソッドは一緒なので参考になります。
先ずはopencvの簡単なサンプルをjavascriptに移植して慣れてから本題に取り掛かったほうが近道と思います。
https://qiita.com/hon_no_mushi/items/0edb47b46f827f9fca26
これを参考にすると良いかも。半年も前の情報なので状況変わっている可能性が大きいので、英語のサイトもよく調べたほうが良いです。
あ～opencv.jsは配布されてなくて自分で作る必要がありました。難易度高いです。
ありがとうございます、本当に懇切丁寧でありがたいです。
opensv.jsに近いものがあるという話と、opencvにこだわってるわけではないので、手法を理解した上でベストアンサー模索してみます
時間見つけてちょこちょこ見てるのですが、なかなか素人に対して難易度が高くて驚いてます。
また、月曜日あたりに時間見つけてガッツリやる予定です。
>opensv.jsに近いものがある
opensv.jsほど使い勝手良さそうなのが見つからなかったんですか、なにか情報お持ちでしたら書き込みお願いします。
今のところはオススメはopencv4nodejsかなと思ってます。
遅くなってすみません
ハッキリ言って全然本題に入っていなかったのですが、openCVのJSへのビルド？がうまくできなかったので、公開してるひとのを利用していたのですがうまく行かず…で、本日わかったのですが、独自仕様になっている？ので別の公開のスクリプトを利用することでやっと環境が整った状況です
失敗 https://github.com/sakiyamaK/OpenCVjs ▶多分関数そのものも違うのかな？
成功 https://cdn.rawgit.com/huningxin/opencv.js/master/build/asm.js/opencv.js
失敗のものはver1のようですね。ラベリングはver3からなので今回の件には使えないです。
すみません
https://qiita.com/r_i_qita/items/2b30c1beb99eea93f496
このサンプルを実現できない次元で苦しんでますが、なにも報告しないのもあれですので恥をしのいで状況だけお伝えします。
https://jsfiddle.net/ssmx/gpm43wj6/
あ、やっと機能しました、jsの差し込む場所だったようです、ごめんなさい
昨晩までなんとか二値化までいけましたが、ラベリングに関してつまずいてます。今日明日でクリアできるようにがんばります
https://jsfiddle.net/ssmx/gpm43wj6/
進展がおそすぎてすみません
asm.js というキーワードもありましたし、そもそものライブラリが怪しいのかもしれません
２値化した画像:dst_binaryを割り当てた結果、label_src側にラベリングした値が戻ってくると見ているのですが、[0]を始め、みなundefineでした。console.logにはException: BindingError も多発。
cv.connectedComponentsWithStats(dst_binary, label_src, stats, centroids, 8, cv.CV_32S);
label_srcをlogに吐き出したところ、
(index) ptrType ptr count
$$ RegisteredPointer 8215864 {…}
なんとか渡しながら努力してみましたが敷居が高かったかもしれません。
https://jsfiddle.net/ssmx/gpm43wj6/
ありがとうございました！
jsを諦めて、泣く泣くPython環境を構築して試してみようと割り切ったところ、環境の準備には死ぬほど時間を要しましたが、例のconnectedComponentsWithStatsはスムーズに実行することができ、各要素の中心を取得することができました。つまりjavascriptの利用の仕方がわからなかった、というオチです。
教えていただきましたリンクは大変参考になりましたが、pythonの勝手なのか、単純にクラスを利用する知識がないからか、bit演算？的な部分がわかりませんでいしたが
こちらのリンクで、対象の座標を割り出すことができました。
本当にご丁寧にありがとうございました
https://algorithm.joho.info/programming/python/opencv-labeling-blob-py/
0
二値化出来たなら、黒色の上に切り取る中心があるなら塗りつぶし検索すれば左上と右下は簡単に出せると思います。
白色の上に中心がある場合は、同じように塗りつぶし検索で、中心からの距離が最も近い黒色を検索すれば切り取り対象は見つけられます。
作って欲しいだけって質問じゃないですよね？
投稿2018/07/26 10:18
総合スコア422
ありがとうございます！
いえいえ、作ろうにも、なんていうんですかね。
手がかりがわからなくて、二階調まではなんとなく行き着いたのですが、そこからの
どうすればよいのか行き詰まっていました。
「塗りつぶし検索」というキーワードであたってみようと思います
時間かかってすみません。塗りつぶし検索が見つからないですが、輪郭の抽出という観点で調べてみようと思います。
塗りつぶし検索という単語では出てこなかったのですが、いろいろなドキュメントを読んでいく中で
別の方から紹介された http://imagingsolution.blog.fc2.com/blog-entry-193.html のページの理論がそれに該当するのだな、というのはわかりました。
しかし、それをjsで実現していく上で
https://qiita.com/wakaba130/items/9d921b8b3eb812e4f197
を詰めていきましたが、どうにも
connectedComponentsWithStats
のハードルを超えらませんでした。
ご回答ありがとうございました。（まともな返事が書けるのが今のタイミングになってすみません）
こちら結局、javascriptとopencv.jsの利用方法がわからなかった、という根本的な問題でした。
Python で実現することができました。ありがとうございました。
0
opencv4nodejsでnode.js版があります。
これを使うのが楽そうです。説明を読むとopencvのver3.4です。
サーバーサイドでjavascriptを動かすのかクライアントで動かすのか考えてください。
- サーバーに画像を上げて処理させるのか、各pcで処理させたいか。
クライアントサイドで動かすなら、browserifyについて調べてみて下さい。
Browserifyの使い方について調べてみた - yutaponのブログ
npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発 | Web Scratch
賢く使うBrowserify - Browserifyとは | CodeGrid
使い方は別の質問であげたほうがいいと思います。
私は詳しくないんで、もっと詳し人が助けてくれると思います。
投稿2018/07/30 11:11
編集2018/07/30 15:45総合スコア2826
ありがとうございます
なんか、合間合間に試行錯誤してるんですけど、そもそもOpenCV.jsへのコンパイル自体で引っかかってたりでハードル高すぎて、皆さんに申し訳ないと思いますがスキルや知識がそもそも論的な塩梅です（涙
node.jsとかも触れたこと無く(共有サーバおさわり程度)、理屈的には快適そうですが、
いやはや、そもそも論です（冷汗）
node.js版のopencv.JSを`browserify`でブラウザでも使えるように変換したら
共有サーバーとか使わなくても開発出来ると思います。ということです。
コンパイル環境を作らなくて良いので、（代わりにnode.js環境とbrowserifyが必要だけど難易度はかなり下がります。Windowsでも出来る）ハードルはかなり下がります。
0
投稿2018/07/27 13:40
総合スコア2826
こ、こ、こ、これは…みるからにハードルがたかそうですねぇ（汗）
今回の質問には使わないと思いますが、将来必要になるかもしれないので書いておきました。
いまは重心で十分ですね。
あなたの回答
tips
プレビュー
