キャンバスイメージを保存するときにDjangoリクエスト.FILESが空です。

Question

私はイメージがユーザーに表示され、ユーザーがイメージ上に描画することができるwebappを作成しています（イメージはキャンバスにあります）。

これでユーザーが描画を完了すると、ユーザーは保存ボタンを押してイメージを静的フォルダ（ローカルではない）に保存する必要があります。私はこれを達成するためにDjangoを使用しているので、私の要求。ファイルは、私がルートを呼び出すたびに常に空です。

私の質問は、ユーザーがローカルではなくプロジェクトのフォルダに描画したキャンバスを保存する方法です。

index.htmlを

<div id="uploaderForm"> 
     <form enctype="multipart/form-data" action="{% url 'addImg' %}" method="post"> 
      <input type="hidden" for="image_data" id="image_data" name="image_data" /> 
     </form> 

     <div class="uploaderItem" id="uploaderSubmit"> 
      <a href="#" onclick="addImage();">Add to the gallery</a> 
     </div> 
</div> 

script.js

function addImage() 
{ 
    console.log("In add image"); 
    var image_data = canvas.toDataURL(); 
    console.log("Image data:", image_data); 
    $('#image_data').val(image_data); 
    $('#uploaderForm > form').submit() 

} 

views.py

def add(request): 
    print request.FILES 
    #print request.POST['image_data'] 
    return HttpResponse("You're looking at question") 

Answer 1

FILESアレイファイル入力フィールドにマルチパート形式でアップロードされたファイル用に予約されています。あなたがやっていることは、あなたのイメージを表すbase64でエンコードされた文字列を隠しテキストフィールドに渡してから、あなたのサーバーに送信することです。あなたのコードでは、画像はこちらをご覧ください。

image_data = request.POST.get('image_data') 

は、それはあなたがそれをデコードする必要がありますので、以下の例では、ほぼすべてのデータのURLに適用することができ、ベース64文字列にしますが、それはちょっとトリッキーですのでフォーマットは、お使いのブラウザに依存します：

import re 
pattern = r'^data:(?P<mime_type>[^;]+);base64,(?P<image>.+)$' 
result = re.match(pattern, image_data) 
if result: 
    mime_type = result.group('mime_type') 
    image = result.group('image').decode('base64') 

は注意してください：トランスポートとしてファイルを使用していないことで、あなたは基本的には、サーバのメモリに画像全体をダンプしている、とあなたが計画している場合には、高価なのです多くのクライアントにサービスを提供するには時間がかかります。そのため、画像を処理する前にリクエストがタイムアウトする可能性があります。

これを修正するには、JavaScriptを使用してBlobを処理するためのサポートされている方法であるAJAXを使用して画像をアップロードすることを検討する必要があります。