teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問カンマ区切りで２次元コード化した画像ファイルを配列に格納したい

編集履歴

質問編集履歴

8

古いQRコードを削除しました

2019/09/28 23:43

投稿

hkrgok
hkrgok

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- カ![イメージ説明](3bbbddd3437c3e7f7deec4ea828f6651.jpeg)れた文字列を配列に格納したいと考えております。
1
+ QRコードに入れた文字列を配列に格納したいと考えております。
2
2
 
3
3
  その方法・書き方についてお伺いします。
4
4
 

7

ご指摘いただきましたQRコードのカンマを半角に修正しました

2019/09/28 23:43

投稿

hkrgok
hkrgok

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![![イメージ説明](e8f89ee53cb4b277326bd9134501bbb2.png)]カンマで区切られた文字列を配列に格納したいと考えております。
1
+ カ![イメージ説明](3bbbddd3437c3e7f7deec4ea828f6651.jpeg)れた文字列を配列に格納したいと考えております。
2
2
 
3
3
  その方法・書き方についてお伺いします。
4
4
 
@@ -189,3 +189,7 @@
189
189
 
190
190
 
191
191
  </html>
192
+
193
+
194
+
195
+ ![イメージ説明](74c788076acecb75394af164c377418d.jpeg)

6

画像の挿入の仕方を変えました

2019/09/28 23:42

投稿

hkrgok
hkrgok

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](e8f89ee53cb4b277326bd9134501bbb2.png)カンマで区切られた文字列を配列に格納したいと考えております。
1
+ ![![イメージ説明](e8f89ee53cb4b277326bd9134501bbb2.png)]カンマで区切られた文字列を配列に格納したいと考えております。
2
2
 
3
3
  その方法・書き方についてお伺いします。
4
4
 

5

pngをあげました。

2019/09/28 02:55

投稿

hkrgok
hkrgok

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- カンマで区切られた文字列を配列に格納したいと考えております。
1
+ ![イメージ説明](e8f89ee53cb4b277326bd9134501bbb2.png)カンマで区切られた文字列を配列に格納したいと考えております。
2
2
 
3
3
  その方法・書き方についてお伺いします。
4
4
 

4

今回のものすべて上げました。変更点については本文に日付と一緒に書いてあります。宜しくお願いします。

2019/09/25 17:25

投稿

hkrgok
hkrgok

スコア4

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,167 @@
25
25
  ※元々の文字列はカンマで区切られています。
26
26
 
27
27
  。
28
+
29
+
30
+
31
+ 2019/09/25
32
+
33
+ 以下今回のものすべてです。
34
+
35
+
36
+
37
+ 上記で
38
+
39
+ var Array = TargetString.split(",");
40
+
41
+ としたものを
42
+
43
+ ary = message.str(',');
44
+
45
+ としました。
46
+
47
+
48
+
49
+ <!DOCTYPE html>
50
+
51
+ <html>
52
+
53
+ <head>
54
+
55
+ <script src="https://cdn.jsdelivr.net/npm/jsqr@1.1.1/dist/jsQR.min.js" integrity="sha384-i4Tuh5Z0ns/3M0289mSougur8irvedWPBlwOcJ7ob5AK/rvN5tjkwzu7P1k1dThG" crossorigin="anonymous"></script>
56
+
57
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
58
+
59
+ </head>
60
+
61
+
62
+
63
+ <body>
64
+
65
+ <input type="file" accept="img/png,img/jpg,img/jpeg,img/gif">
66
+
67
+
68
+
69
+ </body>
70
+
71
+ <script>
72
+
73
+
74
+
75
+ var fs = WScript.CreateObject("Scripting.FileSystemObject")
76
+
77
+ var csv = fs.CreateTextFile("result.csv",true,false)
78
+
79
+
80
+
81
+ function scan(e){
82
+
83
+ const files = e.target.files || e.dataTransfer.files;
84
+
85
+ if(!files.length) return;
86
+
87
+ const files = files[0];
88
+
89
+ const fileReader = new FileReader();
90
+
91
+ fileReader.onload = function(theFile){
92
+
93
+ const image = new Image();
94
+
95
+ image.onload = function(){
96
+
97
+ const canvas = document.createElement('canvas');
98
+
99
+ canvas.width = this.width;
100
+
101
+ canvas.height = this.height;
102
+
103
+ const ctx = canvas.getContext('2d');
104
+
105
+ ctx.drawImage(image, 0, 0);
106
+
107
+ const imageData = ctx.getImageData(0, 0, this.width, this.height);
108
+
109
+ const data = jsQR(imageData.data, imageData.width, imageData.height);
110
+
111
+ if (data) {
112
+
113
+ const message = data.data;
114
+
115
+ /*このように質問欄に上げた時から以下のように変更しました*/
116
+
117
+ ary = message.str(',');
118
+
119
+ //カンマ区切りの文字列をcsvファイルにして保存
120
+
121
+ exportCSV(ary);
122
+
123
+ }
124
+
125
+ };
126
+
127
+ const dataURL = theFile.target.result;
128
+
129
+ if(!dataURL || !dataURL.startsWith("data:image/")){
130
+
131
+ alert("読み取りできませんでした");
132
+
133
+ }
134
+
135
+ };
136
+
137
+ fileReader.readAsDataURL(file);
138
+
139
+ }
140
+
141
+
142
+
143
+ //配列をcsvで保存するfunction
144
+
145
+ function exportCSV(content){
146
+
147
+ for (var i = 0; i< content.length; i++){
148
+
149
+ var value = content[i];
150
+
151
+
152
+
153
+ for (var j = 0; j< value.length; j++){
154
+
155
+ var innerValue = value[j]===null?'':value[j].result = result + '"' + result + '"';
156
+
157
+ formatCSV += ',';
158
+
159
+ formatCSV += result;
160
+
161
+ }
162
+
163
+ formatCSV += '/n';
164
+
165
+ }
166
+
167
+
168
+
169
+ fs.Write(formatCSV);
170
+
171
+
172
+
173
+ if(!Object.keys(fs).length){
174
+
175
+ console.log('保存できませんでした。');
176
+
177
+ }else{
178
+
179
+ console.log('保存できました。');
180
+
181
+ }
182
+
183
+
184
+
185
+ }
186
+
187
+ </script>
188
+
189
+
190
+
191
+ </html>

3

最終的な目的を変更しました

2019/09/24 17:29

投稿

hkrgok
hkrgok

スコア4

test CHANGED
@@ -1 +1 @@
1
- 画像ファイルとして読み込んだ２次元コードをCSVで転記したい
1
+ カンマ区切りで２次元コード化した画像ファイルを配列に格納したい
test CHANGED
@@ -1,10 +1,6 @@
1
- ２次元コード（QRコード）で読み込み、それをExcelやspreadsheetに流し込みCSVファイルを作りたいと考えております。
1
+ カンマで区切られた文字列を配列に格納したいと考えております。
2
2
 
3
- カンマで区切られた文字列を配列に格納します。
4
-
5
- それをExcel等のセルに入力するイメージです。
6
-
7
- その実装方法についてお伺いします。
3
+ その方法・書き方についてお伺いします。
8
4
 
9
5
 
10
6
 
@@ -20,8 +16,12 @@
20
16
 
21
17
  としてみました。
22
18
 
19
+ 結果は配列になっていないようです。
20
+
23
- ここから、Arrayの要素をcsvとする方法が検索をしてもうまく見つかりません。
21
+ 配列に格納する方法と書き方を教えてください。
24
22
 
25
23
 
26
24
 
27
- よろしくご教示ください。
25
+ ※元々の文字列はカンマで区切られています。
26
+
27
+ 。

2

具体的に進めたところまで記述しました

2019/09/23 17:25

投稿

hkrgok
hkrgok

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,99 +1,27 @@
1
1
  ２次元コード（QRコード）で読み込み、それをExcelやspreadsheetに流し込みCSVファイルを作りたいと考えております。
2
+
3
+ カンマで区切られた文字列を配列に格納します。
4
+
5
+ それをExcel等のセルに入力するイメージです。
2
6
 
3
7
  その実装方法についてお伺いします。
4
8
 
5
9
 
6
10
 
11
+ //読み込んだ画像データをTargetString に代入
12
+
13
+ const imgData = ctx.getImageData(0, 0, this.width, this.height);
14
+
15
+ const TargetString = jsQR(imgData.data, imgData.width, imgData.height);
16
+
17
+ //カンマで分割した文字列TargetStringを配列に格納
18
+
19
+ var Array = TargetString.split(",");
20
+
7
- ### 該当のソースコード
21
+ としてみました。
22
+
23
+ ここから、Arrayの要素をcsvとする方法が検索をしてもうまく見つかりません。
8
24
 
9
25
 
10
26
 
11
- ```HTML
12
-
13
- <!DOCTYPE html>
14
-
15
- <html>
16
-
17
- <head>
18
-
19
- 　　<script src="https://cdn.jsdelivr.net/npm/jsqr@1.1.1/dist/jsQR.min.js" integrity="sha384-i4Tuh5Z0ns/3M0289mSougur8irvedWPBlwOcJ7ob5AK/rvN5tjkwzu7P1k1dThG" crossorigin="anonymous"></script>
20
-
21
- <script type="text/javascript">
22
-
23
- </head>
24
-
25
-
26
-
27
- <body>
28
-
29
- <input type="file" accept="image/png,image/jpg,image/jpeg,image/gif" onchange="scan(event)">
30
-
31
-
32
-
33
- </body>
34
-
35
-
36
-
37
- </html>
38
-
39
- ```
40
-
41
-
42
-
43
- function yomikomi(e) {
44
-
45
- const files = e.target.files || e.dataTransfer.files;
46
-
47
- if (!files.length) return;
48
-
49
- const file = files[0];
50
-
51
- const fR = new FileReader();
52
-
53
- fR.onload = function(theFile) {
54
-
55
- const img = new Image();
56
-
57
- img.onload = function() {
58
-
59
- const canvas = document.createElement('canvas');
60
-
61
- canvas.width = this.width;
62
-
63
- canvas.height = this.height;
64
-
65
- const ctx = canvas.getContext('2d');
66
-
67
- ctx.drawImage(img, 0, 0);
68
-
69
- const iD = ctx.getImageData(0, 0, this.width, this.height);
70
-
71
- const data = jsQR(iD.data, iD.width, iD.height);
72
-
73
- if (data) {
74
-
75
- const msg = data.data;
76
-
77
- console.log("message:", msg);
78
-
79
- }
80
-
81
- };
82
-
83
- const dataURL = theFile.target.result;
84
-
85
-
86
-
87
- }
88
-
89
- ```
90
-
91
- ```Javascript
92
-
93
-
94
-
95
- データとデータの間は「、」（全角カンマ）の状態でQRコードになっています。
96
-
97
- ご教示ください。
27
+ よろしくご教示ください。
98
-
99
- よろしくお願いします。

1

htmlとjavascriptが分けられていませんでした

2019/09/22 08:37

投稿

hkrgok
hkrgok

スコア4

test CHANGED
@@ -1 +1 @@
1
- 読み込んだ画像ファイルの中身をCSVで転記
1
+ 画像ファイルとして読み込んだ２次元コードをCSVで転記したい
test CHANGED
@@ -32,6 +32,14 @@
32
32
 
33
33
  </body>
34
34
 
35
+
36
+
37
+ </html>
38
+
39
+ ```
40
+
41
+
42
+
35
43
  function yomikomi(e) {
36
44
 
37
45
  const files = e.target.files || e.dataTransfer.files;
@@ -56,7 +64,7 @@
56
64
 
57
65
  const ctx = canvas.getContext('2d');
58
66
 
59
- ctx.drawImage(image, 0, 0);
67
+ ctx.drawImage(img, 0, 0);
60
68
 
61
69
  const iD = ctx.getImageData(0, 0, this.width, this.height);
62
70
 
@@ -78,12 +86,14 @@
78
86
 
79
87
  }
80
88
 
81
- </html>
82
-
83
89
  ```
84
90
 
85
- fileにどうすればよいでしょうか。
91
+ ```Javascript
86
92
 
87
- データとデータの間は「、」（全角カンマ）の状態でQRになっています。
88
93
 
94
+
95
+ データとデータの間は「、」（全角カンマ）の状態でQRコードになっています。
96
+
97
+ ご教示ください。
98
+
89
- どうかよろしくお願いします。
99
+ よろしくお願いします。