Canvasの情報をサーバーに送信したい

前提・実現したいこと

Canvasで描いた絵をDjangoのサーバーに送信し、Pythonで画像処理を施すプログラムを実装しています。

描いた絵をJavaScriptでサーバーに送るところでエラーが発生しました。

発生している問題・コンソールに出力されるエラーメッセージ

Safari上のエラーSyntaxError: The string did not match the expected pattern.
Chrome上のエラーSyntaxError: Unexpected token < in JSON at position 2

下のソースコードのError2です。

該当のソースコード

HTML
1<html>
2  <head>
3        <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
4  </head>
5  <body>
6
7    <canvas id = "board"></canvas>
8
9    <form action = "{% url 'home' %}" method = "POST">
10      {% csrf_token %}
11      <button id = "download" type = "submit">実行</button>
12    </form>
13
14    <script>
15      function sendServer(url, param){
16        fetch(url, param)
17          .then((response)=>{
18            return response.json();
19          })
20          .then((json)=>{
21            if(json.status){
22              alert("送信に『成功』しました");
23            }
24            else{
25              alert("送信に『失敗』しました");
26              console.log(`[error1] ${json.result}`);
27            }
28          })
29          .catch((error)=>{
30            alert("送信に『失敗』しました");
31            console.log(`[error2] ${error}`);
32          });
33      }
34
35      document.getElementById("download").addEventListener("click", function() {
36        
37        const csrftoken = Cookies.get('csrftoken');
38        const canvas = document.getElementById("board").toDataURL("image/png");
39        
40        // 送信情報の設定
41        const param = {
42          method: "POST",
43          headers: {
44            "Content-Type": "application/json; charset=utf-8",
45            "X-CSRFToken": csrftoken,
46          },
47          body: JSON.stringify(canvas)
48        };
49    
50        // サーバへ送信
51        sendServer("{% url 'home' %}", param);
52      });
53
54    </script>
55  </body>
56</html>

urls.py

Python
1from django.urls import path
2from . import views
3
4urlpatterns = [
5    path("", views.index, name = "home")
6]

views.py

Python
1from django.shortcuts import render
2
3def index(request):
4    if request.method == "GET":
5        return render(
6            request,
7            "home.html",
8        )
9    else:
10        return render(
11            request,
12            "home.html",
13            {"title": 100}
14        )
15

試したこと

・tokenの有無でデバッグしたので、token関係のエラーではないと思います。
・{% url 'home' %}の部分も大分いじりましたがよくわかりませんでした。
・おそらく関数sendServer内のresponseがバグっているのだと思います。

補足情報

参考にしたサイト

Djangoで作った備忘録登録WEBアプリの高機能化①（タイトル・タグ・本文検索機能の付加）

[HTML5] Canvasを画像に変換しサーバへ送信する

行動規範の内容に同意します

回答2件

ベストアンサー

ブログをご覧いただきありがとうございます。
ねこの足跡Rの者です。

PythonやDjangoは知見がないのですが、いくつか気になった点を上げておきますね。

ブログに記載したサンプルはFetch APIを利用してサーバへCavnas上のデータをAjaxで送信するものでしたが、提示されているHTMLのbuttonタグをtype="submit"にするとaction属性で指定したページへ遷移してしまいます。ここではtype="button"としていただくのが良いのではないかと思います。もしくはpreventDefault()でキャンセルしてください。
以下の第一引数で指定している箇所には、Canvasのデータを受け取るためのPythonかなにかのスクリプトのURLが最終的に入っていると思うのですが、こちらのスクリプトは正常に稼働しているでしょうか？提示されているJSの内容ですとPythonは最終的にJSON文字列を返却する必要があります。

javascript
1sendServer("{% url 'home' %}", param);

投稿2021/02/27 10:39

編集2021/02/27 10:45

katsubemakito

総合スコア72

nonono421

2021/02/28 16:10

管理者様ありがとうございます、いつも参考にさせてもらっています。 1. type="button"に変更しましたが、エラーメッセージは変わりませんでした。 2. 追記しました、テンプレを写しただけなので詳しくはわかりませんがviews.py内のrequestに送られるはずです。urlもおそらく正常に動いているはずです。ところでChrome上で実行すると"SyntaxError: Unexpected token < in JSON at position 2"という別のエラーが出たのですが、これはJSON関係のエラーなのでしょうか...??

katsubemakito

2021/03/01 06:45

views.pyを拝見したのですが、最終的にHTMLが返っていませんか？以下のFetch APIのレスポンスを処理する箇所でJSONが返ってくることを期待しているわけですから、HTMLが返されると`response.json()`でパース出来ないためエラーになります。 ```javascript function sendServer(url, param){ fetch(url, param) .then((response)=>{ return response.json(); }) ``` > SyntaxError: Unexpected token < in JSON at position 2"という別のエラーが出たのですが、これはJSON関係のエラーなのでしょうか...?? その可能性が高いですね。 views.pyが最終的に何を返しているのかChromeのDeveloperToolなどで覗いてみると良いかもしれませんね。

nonono421

2021/03/04 04:02 編集

なるほど...fetchの部分で一度サーバーに情報が送信されるんですね。fetchの仕様をイマイチ理解していませんでした。お手数おかけして申し訳ありません、なんとか解決できそうです。

行動規範の内容に同意します

bodyもkey->value形式にしないといけないのでは。
canvasだけそのままJSON.stringifyにしても意味がなさそうです。

例:

js
1body: JSON.stringify({img:canvas})
2

投稿2021/02/26 23:20

m.ts10806

総合スコア80875

m.ts10806

2021/02/26 23:28

補足： headerのcontent typeにあわせるが原則なので

nonono421

2021/02/27 00:57

似たような変更を何回か繰り返したのですが、エラーも変わらずダメでした...

m.ts10806

2021/02/27 01:12

「似たような」は「同じ」ではないので、正確な情報を提示してください。ヘッダーのコンテンツタイプとボディのデータ形式を合わせるのはマストです。 1つ1つデータを確認してください

nonono421

2021/02/27 01:46

わかりました、提示されたようにbody: JSON.stringify({img:canvas})や、参考サイトに書いてあったようにbody: JSON.stringify({data: canvas})にしましたが治りませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

Canvasの情報をサーバーに送信したい

前提・実現したいこと

発生している問題・コンソールに出力されるエラーメッセージ

該当のソースコード

試したこと

補足情報

関連した質問