質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1282閲覧

canvasを画像化してPOSTで送信したい

yutaro0822

総合スコア7

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/05/31 09:10

前提・実現したいこと

Django2.0 での質問です。

htmlに埋め込んだcanvasに描画をしたのち画像化・POSTメソッドで送信しdjangoの方で画像をPILで扱いたいです。

発生している問題・エラーメッセージ

0>

OSError: cannot identify image file <_io.BytesIO object at 0x1124636d0>

該当のソースコード

html

1<div style="border:solid 1px #000000;width:400px"> 2 <canvas id="can" width="400px" height="300px"></canvas> 3 <form action="{% url 'canvas_predict' %}" method="post" id="form-id" enctype="multipart/form-data"> 4 {% csrf_token %} 5 <input type="button" onclick="blob()" id="submit_btn"> 6 <button type="submit"></button> 7 </form> 8</div>

javascript

1var can; 2var ct; 3var ox=0,oy=0,x=0,y=0; 4var mf=false; 5 6function mam_draw_init(){ 7 //初期設定 8 can=document.getElementById("can"); 9 can.addEventListener("touchstart",onDown,false); 10 can.addEventListener("touchmove",onMove,false); 11 can.addEventListener("touchend",onUp,false); 12 can.addEventListener("mousedown",onMouseDown,false); 13 can.addEventListener("mousemove",onMouseMove,false); 14 can.addEventListener("mouseup",onMouseUp,false); 15 ct=can.getContext("2d"); 16 ct.strokeStyle="#000000"; 17 ct.lineWidth=5; 18 ct.lineJoin="round"; 19 ct.lineCap="round"; 20 clearCan(); 21 blob(); 22 } 23function onDown(event){ 24 mf=true; 25 ox=event.touches[0].pageX-event.target.getBoundingClientRect().left; 26 oy=event.touches[0].pageY-event.target.getBoundingClientRect().top; 27 event.stopPropagation(); 28} 29function onMove(event){ 30 if(mf){ 31 x=event.touches[0].pageX-event.target.getBoundingClientRect().left; 32 y=event.touches[0].pageY-event.target.getBoundingClientRect().top; 33 drawLine(); 34 ox=x; 35 oy=y; 36 event.preventDefault(); 37 event.stopPropagation(); 38 } 39} 40function onUp(event){ 41 mf=false; 42 event.stopPropagation(); 43} 44 45function onMouseDown(event){ 46 ox=event.clientX-event.target.getBoundingClientRect().left; 47 oy=event.clientY-event.target.getBoundingClientRect().top ; 48 mf=true; 49} 50 51function onMouseMove(event){ 52 if(mf){ 53 x=event.clientX-event.target.getBoundingClientRect().left; 54 y=event.clientY-event.target.getBoundingClientRect().top ; 55 drawLine(); 56 ox=x; 57 oy=y; 58 } 59} 60 61function onMouseUp(event){ 62 mf=false; 63} 64 65function drawLine(){ 66 ct.beginPath(); 67 ct.moveTo(ox,oy); 68 ct.lineTo(x,y); 69 ct.stroke(); 70} 71 72function clearCan(){ 73 ct.fillStyle="rgb(255,255,255)"; 74 ct.fillRect(0,0,can.getBoundingClientRect().width,can.getBoundingClientRect().height); 75} 76 77 78 79function blob(){ 80 var base64 = can.toDataURL('image/png'); 81 var request = { 82 url: 'http://localhost:4567/base64', 83 method: 'POST', 84 params: { 85 image: base64.replace(/^.*,/, '') 86 }, 87 success: function (response) { 88 console.log(response.responseText); 89 } 90 }; 91 Ext.Ajax.request(request); 92} 93 94

Django

1from django.shortcuts import render, redirect 2from PIL import Image 3import base64 4from io import BytesIO 5 6... 7def canvas_predict(request): 8 code = base64.b64decode(request.POST['csrfmiddlewaretoken']) 9 dec_img = Image.open(BytesIO(code)) 10 11 12 return render(request, 'mnist/result.html')

試したこと

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

は書いてあります

正直、jsのblob()メソッドで本当に送信されたのかも怪しいです。
もしかするとhtml部分で問題があるのではと思っています。

当方初めての質問となり、何かとわからないことだらけです。
かなり調べてもわからなかったので質問させていただきました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

AJAX部分で

javascript

1Ext.Ajax.request

と書かれていますが、Ext JS をお使いでしょうか?
使っていない場合は jQuery の jQuery.ajax() メソッドを使ってください。

あと、送信できているかどうかは、Google Chorme のデベロッパーツールの Network タブで XHR にフィルタ切り替えすると簡単に通信内容見れますので、そちらで送れてるかどうか見ると良いでしょう。

また、問題なく送れているようなら、サーバー側の問題だと思いますので、その場合は一度 Base64 エンコードされたデータが受信できているかテキストファイルに書き出す等して確認し、ダメだった場合はルーティング等の確認をすると良いと思います。

投稿2018/05/31 12:27

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yutaro0822

2018/05/31 13:20

ajaxで失敗していました。 そこで <script> var canvas = document.getElementById('can'); //base64データを取得(エンコード) var base64 = canvas.toDataURL('image/png'); var fData = new FormData(); fData.append('img', base64); $(function() { $('#button').click( function() { $.ajax({ type: 'POST', data: fData , contentType: false, processData: false, success: function(data) { $('#text').html(data); }, error: function(data) { alert('error'); } }); } ); }); </script> こちらのように考えたのですが、ERR_connection_refused になってしまいます。コード等に問題ありますでしょうか??
yhg

2018/05/31 13:28

dataType: 'json' 指定してみたらどうでしょう?
yutaro0822

2018/05/31 13:38

補足です。 html <canvas id="can" width="400px" height="300px"></canvas> <input type="button" id="button" value="button"/> js部分 <script> var canvas = document.getElementById('can'); //base64データを取得(エンコード) var base64 = canvas.toDataURL('image/png'); var fData = new FormData(); fData.append('img', base64); $(function() { $('#button').click( function() { $.ajax({ type: 'POST', data: fData , contentType: false, processData: false, dataType: 'json', success: function(data) { console.log('success'); }, error: function(data) { alert('error'); } }); } ); }); </script> これでも出来ないのですが、どうしてでしょうか? なんども恐縮です
yhg

2018/05/31 13:47

送信側は問題ないように思うのですが、ボタン押した際にデベロッパーツールの Network タブに表示される通信の内容はどうなっていますか? Response Headers のステータスなどが知りたいです。
yutaro0822

2018/05/31 14:23

(index):16 Uncaught TypeError: Cannot read property 'toDataURL' of null とありますね。png化が出来なさそうですね。
yhg

2018/05/31 14:30

あー、canvas 要素の取得に失敗してますね。こうしましょう。 $(function() { var canvas = document.getElementById('can'); //base64データを取得(エンコード) var base64 = canvas.toDataURL('image/png'); var fData = new FormData(); fData.append('img', base64); $('#button').click( function() { $.ajax({ type: 'POST', data: fData , contentType: false, processData: false, dataType: 'json', success: function(data) { console.log('success'); }, error: function(data) { alert('error'); } }); } ); });
yutaro0822

2018/05/31 14:34

Failed to load resource: the server responded with a status of 403 (Forbidden) となってしまいます。。。
yutaro0822

2018/05/31 14:40

csrf_tokenとかの問題なんでしょうか??
yhg

2018/05/31 14:51

それっぽいですね。 HTML の <form> の中に {% csrf_token %} 記載して、 JavaScript を↓のような感じで、クリックしたタイミングで <form> タグの内容から FormData を生成するようにしましょう。こうすれば FormData に CSRF トークンが入ります。 $('#button').click( function() { var fData = new FormData(document.getElementByID('form-id')); fData.append('img', base64); . . .
yutaro0822

2018/06/01 01:05

なんども本当に申し訳ないです。 Pycharmの開発画面のログにはPOST HTTP1. 1 200と表示されて通信に成功してそうですが Chrome上でエラーが [Violation] 'load' handler took 2006ms という風に出てしまいます…
yhg

2018/06/01 06:55

click イベントの中で重い処理するのがまずいのかもしれません。フォームの submit イベントの中でやってみたらどうでしょうか。 $('#form-id').on('submit', function(event) { event.preventDefault(); var fData = new FormData(this); fData.append('img', base64); . . . });
yutaro0822

2018/06/02 09:27

やはり同じエラーになってしまいます。 自分のajaxへの理解不足な気がするのでもう一度勉強してきます ご丁寧にありがとうございました
guest

0

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 /* canvasの作成 */ 4 var canvas = document.createElement( "canvas" ) ; 5 canvas.width=200; 6 canvas.height=200; 7 var context = canvas.getContext( "2d" ) ; 8 context.beginPath () ; 9 context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ; 10 context.fillStyle = "rgba(255,0,0,0.8)" ; 11 context.fill() ; 12 context.strokeStyle = "purple" ; 13 context.lineWidth = 8 ; 14 context.stroke() ; 15 16 /* blobに変換 */ 17 var type = 'image/png'; 18 var dataurl = canvas.toDataURL(type); 19 var bin = atob(dataurl.split(',')[1]); 20 var buffer = new Uint8Array(bin.length); 21 for (var i = 0; i < bin.length; i++) { 22 buffer[i] = bin.charCodeAt(i); 23 } 24 var blob = new Blob([buffer.buffer], {type: type}); 25 26 /* ajaxで送信 */ 27 var fd=new FormData(); 28 fd.append("myfile", blob,"test.png"); 29 var type = 'image/png'; 30 var xhr = new window.XMLHttpRequest(); 31 xhr.open("post","recv.php"); 32 xhr.responseType = 'blob'; 33 xhr.send(fd); 34 35 /* 念の為表示*/ 36 document.querySelector('body').appendChild(canvas); 37}); 38 39</script> 40

投稿2018/05/31 12:50

編集2018/05/31 12:51
yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問