teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

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

2021/04/01 06:27

投稿

code_shin
code_shin

スコア0

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