質問編集履歴

1

質問内容を具体的に修正しました。

2021/04/01 06:27

投稿

code_shin
code_shin

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,11 +1,93 @@
1
- canvas.toDataURL()で作成したフロントのpngデータをXHRを使い、
1
+ (1)フロントで文字を書く(canvas)。
2
2
 
3
+ (2)ボタン押下でサーバへPNG形式で送信(XHRでアドレスは/canvas/myImage)。
4
+
5
+ (3)サーバは/canvas/myImageで待ち受け、届いたデータを処理する。
6
+
3
- バックKotlinへ渡す。
7
+    ->こ処理はPython連携でOCRチェックを想定す。
8
+
9
+ (4)レスポンスとして、文字が判別できたかどうかをクライアントへ返す。
4
10
 
5
11
 
6
12
 
7
- バックKotlinはktor.locationsを使い「/canvas/test」待ち受けています。
13
+ (3)でどうしたらデータが取得できる現在悩んでいます。
8
14
 
9
- get<T>でタイプセフに処理をたいのですが、
15
+ スとては、Kotlin(A)の箇所です
10
16
 
17
+
18
+
19
+ ```JS
20
+
21
+ function sendImg(){
22
+
23
+
24
+
25
+ var png = canvas.toDataURL();
26
+
27
+
28
+
29
+ var url = "/canvas/myImage";
30
+
31
+ var xhr = new XMLHttpRequest();
32
+
33
+ xhr.open("GET", url, false); //結果を待つので同期処理にしています。
34
+
35
+ xhr.setRequestHeader("Content-Type", "image/png"); //送信データのMIMEを決めています。
36
+
37
+
38
+
39
+ xhr.send(png);
40
+
41
+ }
42
+
43
+
44
+
45
+ ```
46
+
47
+
48
+
49
+ ```Kotlin
50
+
51
+ // ControllerとしてApplication.ktへ追加した関数です。
52
+
53
+ fun Application.canvasModule(testing: Boolean = false) {
54
+
55
+ routing {
56
+
57
+ canvasRoute()
58
+
59
+ }
60
+
61
+ }
62
+
63
+
64
+
65
+ // 待機しているアドレスです。
66
+
67
+ fun Route.canvasRoute() {
68
+
69
+ get("/canvas/myImage"){
70
+
71
+         /*
72
+
11
- Tとなるdata class(val XXX)のXXXの型は何にすると良いでしょうか
73
+ ここでKotlinで処理するPOSTされたデータを取得したいで-----(A)
74
+
75
+ */
76
+
77
+ // dummyで適当なページを現在返します。
78
+
79
+ call.respond(ThymeleafContent("index", mapOf()))
80
+
81
+ }
82
+
83
+ }
84
+
85
+ ```
86
+
87
+
88
+
89
+ Androidで画像データの受け渡しなどはヒットするのですが、Webアプリとなります。
90
+
91
+
92
+
93
+ 参考にできるサイトなど、ご教授いただければと思います。