teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問opencv.js (asm.js版)におけるconnectedComponentsWithStatsの結果を正しく取得できない

編集履歴

質問編集履歴

13

修正

2018/08/03 02:32

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -180,6 +180,8 @@
180
180
 
181
181
 
182
182
 
183
+ あと、付随しますが
184
+
183
185
  ```javascript
184
186
 
185
187
  var label = new cv.Mat(); //ラベル画像(CV_32SC1 or CV_16UC1)
@@ -190,7 +192,7 @@
190
192
 
191
193
  ```
192
194
 
193
- とコメントにありますが、いずれも[データ・タイプ](http://d.hatena.ne.jp/arche_t/20090120/1232445728)を設定していないところです。仕方もわからないです。
195
+ とコメントにありますが、いずれも[データ・タイプ](http://d.hatena.ne.jp/arche_t/20090120/1232445728)を設定していないところに問題があるのか？。そもそも設定の仕方もわからないですが。
194
196
 
195
197
 
196
198
 

12

追記

2018/08/03 02:32

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -126,6 +126,60 @@
126
126
 
127
127
  ### ひっかかり
128
128
 
129
+ [こちらのページ](https://qiita.com/wakaba130/items/9d921b8b3eb812e4f197)を参照していますが、Pythonはよくわからないながら
130
+
131
+ ```Python
132
+
133
+ int nLab = cv::connectedComponentsWithStats(src, LabelImg, stats, centroids);
134
+
135
+
136
+
137
+ // ラベリング結果の描画色を決定
138
+
139
+ std::vector<cv::Vec3b> colors(nLab);
140
+
141
+ colors[0] = cv::Vec3b(0, 0, 0);
142
+
143
+ for (int i = 1; i < nLab; ++i) {
144
+
145
+ colors[i] = cv::Vec3b((rand() & 255), (rand() & 255), (rand() & 255));
146
+
147
+ }
148
+
149
+
150
+
151
+ // ラベリング結果の描画
152
+
153
+ cv::Mat Dst(src.size(), CV_8UC3);
154
+
155
+ for (int i = 0; i < Dst.rows; ++i) {
156
+
157
+ int *lb = LabelImg.ptr<int>(i);
158
+
159
+ cv::Vec3b *pix = Dst.ptr<cv::Vec3b>(i);
160
+
161
+ for (int j = 0; j < Dst.cols; ++j) {
162
+
163
+ pix[j] = colors[lb[j]];
164
+
165
+ }
166
+
167
+ }
168
+
169
+ ```
170
+
171
+ **ラベリング結果の描画色を決定** というところはさっぱりわからないのですが、その下の**ラベリング結果の描画**では、
172
+
173
+ LabelImg.ptr<int>(i)
174
+
175
+ みたいな表現が出てきます。
176
+
177
+ 推測ですが、LabelImg.ptr(i)をforで回している考えると、LabelImg.ptrは配列であるべきなのかな？と思ったりするわけですが、undefinedが返されてます。
178
+
179
+ つまりそもそも connectedComponentsWithStats の設定が失敗しているのかな？と。
180
+
181
+
182
+
129
183
  ```javascript
130
184
 
131
185
  var label = new cv.Mat(); //ラベル画像(CV_32SC1 or CV_16UC1)

11

補足説明追記

2018/08/03 02:30

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -44,11 +44,11 @@
44
44
 
45
45
  var dst_binary = new cv.Mat();
46
46
 
47
- var label = new cv.Mat();
47
+ var label = new cv.Mat(); //ラベル画像(CV_32SC1 or CV_16UC1)
48
48
 
49
- var stats = new cv.Mat();
49
+ var stats = new cv.Mat(); //バウンディングボックスを形成する値と面積値
50
50
 
51
- var centroids = new cv.Mat();
51
+ var centroids = new cv.Mat(); //重心(x,y)（CV_64FC1）
52
52
 
53
53
 
54
54
 
@@ -124,6 +124,28 @@
124
124
 
125
125
 
126
126
 
127
+ ### ひっかかり
128
+
129
+ ```javascript
130
+
131
+ var label = new cv.Mat(); //ラベル画像(CV_32SC1 or CV_16UC1)
132
+
133
+ var stats = new cv.Mat(); //バウンディングボックスを形成する値と面積値
134
+
135
+ var centroids = new cv.Mat(); //重心(x,y)（CV_64FC1）
136
+
137
+ ```
138
+
139
+ とコメントにありますが、いずれも[データ・タイプ](http://d.hatena.ne.jp/arche_t/20090120/1232445728)を設定していないところです。仕方もわからないです。
140
+
141
+
142
+
143
+
144
+
145
+
146
+
147
+ ---
148
+
127
149
 
128
150
 
129
151
  結果的に、[こちらのページ](https://qiita.com/wakaba130/items/9d921b8b3eb812e4f197)で紹介されているようなステップにつなげる予定です。

10

整理

2018/08/03 02:10

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -1,38 +1,32 @@
1
1
  opencvのJavaScript版でラベリングを行おうとして基本的なところで躓いています。
2
2
 
3
- ※当方jsもopencvも初心者です。
3
+ 当方jsもopencvも初心者で[こちら（前回の質問）](https://teratail.com/questions/137975)で画像のピックアップを模索していましたが、躓き部分が質問のレベルに達っせず、新規質問として改めさせていただきます。
4
4
 
5
5
 
6
6
 
7
+ ### 前提
8
+
7
9
  PythonからのJavaScriptへのビルド？は成功せず、githubを調べたところ、asm.js版のopencv.jsが公開されていて、そちらを利用したところopencv.jsが機能を始めたので良しとしました。(探してもnode.js版とasm.js版、もしくはver3.xより古いものしかない)
10
+
11
+ [https://github.com/huningxin/opencv.js/tree/master/build/asm.js/opencv.js](https://github.com/huningxin/opencv.js/tree/master/build/asm.js)
12
+
13
+ こちらを拝借。
14
+
15
+ asm.jsは、対応環境でなければjavaScriptのサブセットとして動くということなので、問題は無いと**思ってます**
8
16
 
9
17
 
10
18
 
19
+ ### テスト環境と実際のプログラム
20
+
11
- こちらで画像のピックアップを模索していましたがもはやそのレベルではなく、そちらの質問版で引っ張るのも間違いかと改めて質問を立てました
21
+ テストしてる環境は[こちら](https://jsfiddle.net/ssmx/6tf734u2/6/)です
12
22
 
13
23
 
14
24
 
15
- 成功したこと
16
-
17
- 画像をopencvによるMat形式にセット…①
18
-
19
- グレイスケール化(モノクロ化)
20
-
21
- ２値化(閾値を基準に白と黒の2色化)…②
22
-
23
- です。
25
+ 以下要約
24
-
25
- ①…![イメージ説明](23bca80d4485dd0469403bbf26fb94e6.png)
26
-
27
- ②…![イメージ説明](74f03c724b0b9b3d33b3629262cc1144.png)
28
-
29
- テストしてる環境は[こちら](https://jsfiddle.net/ssmx/6tf734u2/6/)です-リンク先間違ってたので修正しました
30
-
31
-
32
26
 
33
27
  ```html
34
28
 
35
- <script async src="https://cdn.rawgit.com/ssmxgo/opencv.js/ff19899a/build/asm.js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
29
+ <script src="https://cdn.rawgit.com/ssmxgo/opencv.js/ff19899a/build/asm.js/opencv.js" type="text/javascript"></script>
36
30
 
37
31
  ```
38
32
 
@@ -76,11 +70,35 @@
76
70
 
77
71
 
78
72
 
73
+ console.table(label);
74
+
75
+ console.table(stats);
76
+
79
77
  ```
80
78
 
81
79
 
82
80
 
81
+ ### 成功したこと
83
82
 
83
+ 画像をopencvによるMat形式にセット…①
84
+
85
+ グレイスケール化(モノクロ化)
86
+
87
+ ２値化(閾値を基準に白と黒の2色化)…②
88
+
89
+ です。
90
+
91
+ ①…![イメージ説明](23bca80d4485dd0469403bbf26fb94e6.png)
92
+
93
+ ②…![イメージ説明](74f03c724b0b9b3d33b3629262cc1144.png)
94
+
95
+
96
+
97
+
98
+
99
+
100
+
101
+ ### できないこと
84
102
 
85
103
  本題ですが、次にラベリングを行い画像の要素の取得？、その後に領域検索？みたいなことをする予定なのですが(素人でしてやりながらの理解になります)、その前提としての
86
104
 
@@ -93,8 +111,6 @@
93
111
  がうまく値を取得できていないようです(できているかもしれませんが解析する力がありません)
94
112
 
95
113
 
96
-
97
- 結果的に、[こちらのページ](https://qiita.com/wakaba130/items/9d921b8b3eb812e4f197)で紹介されているようなステップにつなげる予定です
98
114
 
99
115
 
100
116
 
@@ -110,4 +126,8 @@
110
126
 
111
127
 
112
128
 
129
+ 結果的に、[こちらのページ](https://qiita.com/wakaba130/items/9d921b8b3eb812e4f197)で紹介されているようなステップにつなげる予定です。
130
+
131
+
132
+
113
133
  こちらはこちらでpythonさっぱりでやろうとしてることはなんとなくわかりつつも、コードが解析できませんが、それは混沌とさせてしまうため、ここでは割愛いたします

9

画像アップしました

2018/08/03 01:42

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -14,17 +14,19 @@
14
14
 
15
15
  成功したこと
16
16
 
17
- 画像をopencvによるMat形式にセット
17
+ 画像をopencvによるMat形式にセット…①
18
18
 
19
19
  グレイスケール化(モノクロ化)
20
20
 
21
- ２値化(閾値を基準に白と黒の2色化)
21
+ ２値化(閾値を基準に白と黒の2色化)…②
22
22
 
23
23
  です。
24
24
 
25
+ ①…![イメージ説明](23bca80d4485dd0469403bbf26fb94e6.png)
25
26
 
27
+ ②…![イメージ説明](74f03c724b0b9b3d33b3629262cc1144.png)
26
28
 
27
- テストしてる環境は[こちら](https://jsfiddle.net/ssmx/25hryLqn/42/)です-リンク先間違ってたので修正しました
29
+ テストしてる環境は[こちら](https://jsfiddle.net/ssmx/6tf734u2/6/)です-リンク先間違ってたので修正しました
28
30
 
29
31
 
30
32
 
@@ -96,4 +98,16 @@
96
98
 
97
99
 
98
100
 
101
+ 上がlabel,下がstatus をconsole.talbeで出力したものですがわけわかりません（汗）
102
+
103
+ 配列でそれぞれの画像のプロバティが戻ってくるようなイメージなのですが…（そもそもその認識が間違ってるかもしれませんが）
104
+
105
+ ![イメージ説明](9cd511576a61738f648a6e2bfb61c127.png)
106
+
107
+ ※ちなみにFirefoxを使ってますが、chromeだと若干レスポンスが違うように思います
108
+
109
+
110
+
111
+
112
+
99
113
  こちらはこちらでpythonさっぱりでやろうとしてることはなんとなくわかりつつも、コードが解析できませんが、それは混沌とさせてしまうため、ここでは割愛いたします

8

コードの修正、画像はこれからです

2018/08/03 01:26

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -24,9 +24,7 @@
24
24
 
25
25
 
26
26
 
27
- テストしてる環境はこちらです
28
-
29
- https://jsfiddle.net/25hryLqn/39/
27
+ テストしてる環境は[こちら](https://jsfiddle.net/ssmx/25hryLqn/42/)です-リンク先間違ってたので修正しました
30
28
 
31
29
 
32
30
 
@@ -40,17 +38,17 @@
40
38
 
41
39
  ```JavaScript
42
40
 
43
- //画像の読み込み
41
+ // 画像の読み込み
44
42
 
45
- let im = cv.imread(imgElement);
43
+ let mat = cv.imread(imgElement);
46
44
 
47
45
  // 変換先(処理をかけた画像)の定義
48
46
 
49
- var gray = new cv.Mat();
47
+ var dst_gray = new cv.Mat();
48
+
49
+ var dst_binary = new cv.Mat();
50
50
 
51
51
  var label = new cv.Mat();
52
-
53
-
54
52
 
55
53
  var stats = new cv.Mat();
56
54
 
@@ -62,15 +60,19 @@
62
60
 
63
61
  // グレースケール変換
64
62
 
65
- cv.cvtColor(im, gray, cv.COLOR_BGR2GRAY);
63
+ cv.cvtColor(mat, dst_gray, cv.COLOR_RGBA2GRAY, 0);
66
64
 
65
+ //二値化
66
+
67
- cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV | cv.THRESH_OTSU)[1];
67
+ cv.threshold(dst_gray, dst_binary, 0, 255, cv.THRESH_BINARY_INV | cv.THRESH_OTSU);
68
68
 
69
69
 
70
70
 
71
71
  // ラベリング処理
72
72
 
73
- cv.connectedComponentsWithStats(gray,label, stats, centroids, 8, cv.CV_32S)
73
+ cv.connectedComponentsWithStats(dst_binary, label, stats, centroids, 8, cv.CV_32S);
74
+
75
+
74
76
 
75
77
  ```
76
78
 

7

2018/08/03 01:14

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -73,3 +73,25 @@
73
73
  cv.connectedComponentsWithStats(gray,label, stats, centroids, 8, cv.CV_32S)
74
74
 
75
75
  ```
76
+
77
+
78
+
79
+
80
+
81
+ 本題ですが、次にラベリングを行い画像の要素の取得？、その後に領域検索？みたいなことをする予定なのですが(素人でしてやりながらの理解になります)、その前提としての
82
+
83
+
84
+
85
+ connectedComponentsWithStats
86
+
87
+
88
+
89
+ がうまく値を取得できていないようです(できているかもしれませんが解析する力がありません)
90
+
91
+
92
+
93
+ 結果的に、[こちらのページ](https://qiita.com/wakaba130/items/9d921b8b3eb812e4f197)で紹介されているようなステップにつなげる予定です
94
+
95
+
96
+
97
+ こちらはこちらでpythonさっぱりでやろうとしてることはなんとなくわかりつつも、コードが解析できませんが、それは混沌とさせてしまうため、ここでは割愛いたします

6

2018/08/03 00:56

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  ```JavaScript
42
42
 
43
- 画像の読み込み
43
+ //画像の読み込み
44
44
 
45
45
  let im = cv.imread(imgElement);
46
46
 

5

2018/08/03 00:49

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,36 @@
40
40
 
41
41
  ```JavaScript
42
42
 
43
+ 画像の読み込み
44
+
45
+ let im = cv.imread(imgElement);
46
+
47
+ // 変換先(処理をかけた画像)の定義
48
+
49
+ var gray = new cv.Mat();
50
+
51
+ var label = new cv.Mat();
52
+
53
+
54
+
55
+ var stats = new cv.Mat();
56
+
57
+ var centroids = new cv.Mat();
58
+
59
+
60
+
61
+
62
+
63
+ // グレースケール変換
64
+
65
+ cv.cvtColor(im, gray, cv.COLOR_BGR2GRAY);
66
+
67
+ cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV | cv.THRESH_OTSU)[1];
68
+
69
+
70
+
43
- //午前中に追記します
71
+ // ラベリング処理
72
+
73
+ cv.connectedComponentsWithStats(gray,label, stats, centroids, 8, cv.CV_32S)
44
74
 
45
75
  ```

4

2018/08/03 00:44

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -26,12 +26,20 @@
26
26
 
27
27
  テストしてる環境はこちらです
28
28
 
29
- https://jsfiddle.net/ssmx/gpm43wj6/
29
+ https://jsfiddle.net/25hryLqn/39/
30
30
 
31
31
 
32
32
 
33
- ```javascript
33
+ ```html
34
34
 
35
35
  <script async src="https://cdn.rawgit.com/ssmxgo/opencv.js/ff19899a/build/asm.js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
36
36
 
37
37
  ```
38
+
39
+
40
+
41
+ ```JavaScript
42
+
43
+ //午前中に追記します
44
+
45
+ ```

3

2018/08/03 00:16

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -21,3 +21,17 @@
21
21
  ２値化(閾値を基準に白と黒の2色化)
22
22
 
23
23
  です。
24
+
25
+
26
+
27
+ テストしてる環境はこちらです
28
+
29
+ https://jsfiddle.net/ssmx/gpm43wj6/
30
+
31
+
32
+
33
+ ```javascript
34
+
35
+ <script async src="https://cdn.rawgit.com/ssmxgo/opencv.js/ff19899a/build/asm.js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
36
+
37
+ ```

2

2018/08/03 00:11

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  opencvのJavaScript版でラベリングを行おうとして基本的なところで躓いています。
2
2
 
3
3
  ※当方jsもopencvも初心者です。
4
+
5
+
6
+
7
+ PythonからのJavaScriptへのビルド？は成功せず、githubを調べたところ、asm.js版のopencv.jsが公開されていて、そちらを利用したところopencv.jsが機能を始めたので良しとしました。(探してもnode.js版とasm.js版、もしくはver3.xより古いものしかない)
4
8
 
5
9
 
6
10
 

1

2018/08/03 00:01

投稿

ssmxgo
ssmxgo

スコア178

test CHANGED
File without changes
test CHANGED
@@ -10,4 +10,10 @@
10
10
 
11
11
  成功したこと
12
12
 
13
- 画像をopencvによるMat形式にせっと
13
+ 画像をopencvによるMat形式にセット
14
+
15
+ グレイスケール化(モノクロ化)
16
+
17
+ ２値化(閾値を基準に白と黒の2色化)
18
+
19
+ です。