Pythonフラスコwtformsは、form.input.dataの代わりにcanvas dataurlから画像を読み込みます。

Question

現在、画像clientsideのサイズを変更するためのJSコードがあります。今度は、サイズ変更した画像をフラスコのアプリに送信する必要があります。私のフラスコのアプリはそれをaws3にアップロードします。

これは、それはまたdataurlを生成し、私は画像のサイズを変更するために使用するJSコードです：私のフラスコアプリで

$("input[type='file']").change(function() { 

    // from an input element 
    var filesToUpload = this.files; 
    console.log(filesToUpload); 

    var img = document.createElement("img"); 
    img.src = window.URL.createObjectURL(this.files[0]); 

    $(img).load(function() { 

     var MAX_WIDTH = 600; 
     var MAX_HEIGHT = 450; 
     var width = img.width; 
     var height = img.height; 

     if (width > height) { 
      if (width > MAX_WIDTH) { 
      height *= MAX_WIDTH/width; 
      width = MAX_WIDTH; 
      } 
     } else { 
      if (height > MAX_HEIGHT) { 
      width *= MAX_HEIGHT/height; 
      height = MAX_HEIGHT; 
      } 
     }  

     canvas.width = width; 
     canvas.height = height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, width, height); 

     var dataurl = canvas.toDataURL("image/png"); 
     //var file = canvas.mozGetAsFile("foo.png"); 

    }); 

}); 

私はFILECONTENTSを取得するためにform.company_logo_image_path.data.read()を使用しますが、今私はサイズを変更してもリサイズ画像は無視されます。それは私がまだ入力から古いイメージを取得しているからです。私はキャンバス画像を取得する必要があります。

私のフラスコのアプリで画像を取得するには、どのようにデータールを使用しますか？ 他の方法がありますか？

私はdataurl取得直後に私が使用して私のAJAXコードです：私はdataurlにアクセスしようとする私のpythonビューで

$.ajax({ 
    type: "POST", 
    url: "/profil/unternehmen-bearbeiten", 
    data:{ 
    imageBase64: dataurl 
    } 
}).done(function() { 
    console.log('sent'); 
}); 

：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURLあたり

data_url = request.values['imageBase64'] 
#data_url = request.args.get('image') # here parse the data_url out http://xxxxx/?image={dataURL} 
print data_url 
content = data_url.split(';')[1] 
image_encoded = content.split(',')[1] 
body = base64.decodebytes(image_encoded.encode('utf-8')) 
# Then do whatever you want 
print body, type(body) 

Answer 1

を、あなたが何かを得ますlike：

var canvas = document.getElementById('canvas'); 
var dataURL = canvas.toDataURL(); 
console.log(dataURL); 
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby 
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" 

次に、base64を使用してファイルをデコードします。

import base64 
from flask import request 

def your_view(): 
    data_url = request.args.get('image') # here parse the data_url out http://xxxxx/?image={dataURL} 
    content = data_url.split(';')[1] 
    image_encoded = content.split(',')[1] 
    body = base64.decodebytes(image_encoded.encode('utf-8')) 
    # Then do whatever you want 

本文は必要なものです。