前提・実現したいこと
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部分で問題があるのではと思っています。
当方初めての質問となり、何かとわからないことだらけです。
かなり調べてもわからなかったので質問させていただきました。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/31 13:20
2018/05/31 13:28
2018/05/31 13:38
2018/05/31 13:47
2018/05/31 14:23
2018/05/31 14:30
2018/05/31 14:34
2018/05/31 14:40
2018/05/31 14:51
2018/06/01 01:05
2018/06/01 06:55
2018/06/02 09:27