Python燒瓶阿賈克斯得到的圖像 - 最後編輯是問題

Question

因爲昨天我試圖瞭解如何在另一個視圖中使用編碼的base64圖像從某個視圖。

我需要將原始圖像的form.company_logo_image_path.data替換爲調整大小的新圖像。新的調整大小的圖像通過AJAX發送到新視圖。

這裏我AJAX：

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

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

我創建該圖像進行解碼，並存儲在body變量的新觀點：

@app.route('/profil/unternehmen-bearbeiten/resize-image', methods=["POST"]) 
def resize_image(): 
    data_url = request.values['a'] 
    content = data_url.split(';')[1] 
    image_encoded = content.split(',')[1] 
    body = base64.decodestring(image_encoded.encode('utf-8')) 
    return body 

我通過將圖像保存到一個文件夾，用這種試驗我的本地機器和它的工作，所以身體變量正確地存儲調整大小的圖像。

現在我需要這個圖象發送到它會被上傳到AWS3的另一種觀點，我會用這個形象，而不是form.company_logo_image_path.data：

@app.route('/profil/unternehmen-bearbeiten', methods=["GET", "POST"]) 
@login_required 
@check_confirmed 
def edit_company(): 
    the_company = Company.query.filter_by(users_id=current_user.id).first() 

    form = EditCompanyForm(obj=the_company) 
    used_file = the_company.company_logo_image_path 

    if form.validate_on_submit(): 

     form.populate_obj(the_company)  

     imagedata = resize_image() 
     print "The", imagedata 

     if form.company_logo_image_path.data:   
      upload_image_to_aws('baubedarf', "userimages/", form.company_logo_image_path, the_company,'company_logo_image_path', the_company.company_name) 

# ... 

這裏的問題是，我得到一個Bad Request的網站，如果我嘗試從第一個視圖訪問resize_image函數的結果。我怎樣才能訪問新的圖像？

---

我的工作從昨天起這個問題，這是我曾經迄今最大的問題，這是我與我的進步古老的問題： Old question with my progress and tries

編輯

它無論我嘗試什麼，發送到"/profil/unternehmen-bearbeiten"也會導致錯誤的請求錯誤。

請求數據a任何地方產生了錯誤的請求：

try: 
    print request.values['a'] 
except Exception as e: 
    print "error", e 

這裏唯一的例外是錯誤的請求

還請求本身導致了錯誤的請求在畫布上，在瀏覽器中犯規控制檯告訴我一些我可以使用/理解的有用的東西。它同在Eclipse的控制檯，它得到的路線400錯誤的請求，我嘗試發送至：

try: 
    print request.form['uploading_canvas'] 
except Exception as e: 
    print "error 1", e 

編輯

最後我做了一些嚴重的進展！我試圖請求if form.validate_on_submit():中的數據。我現在將代碼放在if form.validate_on_submit():之外，現在我可以請求數據，但我仍然遇到問題，但是從這裏開始，我可以繼續工作！

if request.method == 'POST': 
    print "post" 
    file_data = request.values['a'] 
    imagedata = resize_image(file_data) 
    print "The", type(imagedata) 

if form.validate_on_submit(): 
    # ... 

我在這裏再次收到一個錯誤的請求，但我現在明白了爲什麼。 form.validate_on_submit():本身也是一個POST請求，所以我需要正確的條件，它會工作（我猜）。

基本問題是： 我的Ajax請求，並在我發送給都POST請求路由form.validate_on_submit():，這就是爲什麼我經常收到錯誤的請求，有衝突。我正在嘗試創建一個自定義表單複選框。我試圖移動代碼和其他條件不同。我根本不明白。

我最近嘗試：

""" 
if form.company_check_it.data == True: 
    print "post 1" 
    file_data = request.values['a'] 
    imagedata = resize_image(file_data) 
    print "The", type(imagedata) 
else: 
    print "post 3" 
""" 

""" 
if request.method == 'POST': 
    print "post" 
    file_data = request.values['a'] 
    imagedata = resize_image(file_data) 
    print "The", type(imagedata) 
""" 

if form.validate_on_submit(): 
    print "post 2" 

    """ 
    if form.company_check_it.data == True: 
     print "post 1" 
     file_data = request.values['a'] 
     imagedata = resize_image(file_data) 
     print "The", type(imagedata) 
    else: 
     print "post 3" 
    """ 

    if request.method == 'POST': 
     print "post" 
     file_data = request.values['a'] 
     imagedata = resize_image(file_data) 
     print "The", type(imagedata) 

    form.populate_obj(the_company)  

    """ 
    data_url = request.values['a'] 
    print data_url 
    content = data_url.split(';')[1] 
    image_encoded = content.split(',')[1] 
    body = base64.decodestring(image_encoded.encode('utf-8')) 
    print type(body) 
    """ 

Answer 1

我認爲你需要與此不同的方法，你似乎可以得到混合了HTML表單/瓶的意見/ JavaScript廣告之間傳遞的所有數據。

基本上，您的Javascript應該使用來自畫布的已調整大小的圖像的dataURL在窗體中填充隱藏字段。然後這將被提交到Flask視圖，您可以在其中將數據上傳到S3。

下面是一個簡單的示例應用程序，說明我的意思。

app.py

from flask import Flask, url_for, redirect, render_template 
from flask_wtf import Form 
from wtforms import HiddenField 
import base64 


class EditCompanyForm(Form): 
    resized_image = HiddenField() 


app = Flask(__name__) 
app.config['SECRET_KEY'] = '1234' 


@app.route("/", methods=['GET', 'POST']) 
def index(): 

    form = EditCompanyForm() 

    if form.validate_on_submit(): 
     if form.resized_image.data: 
      data = resize(form.resized_image.data) 
      print("Uploading to AWS") 
      # upload_image_to_aws(data, other_variables_as_needed) 

     return redirect(url_for('index')) 

    return render_template('index.html', form=form) 


def resize(data_url): 

    content = data_url.split(';')[1] 
    image_encoded = content.split(',')[1] 
    body = base64.decodestring(image_encoded.encode('utf-8')) 
    return body 


if __name__ == "__main__": 
    app.run(debug=True) 

模板/ index.html的

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script> 

    $(document).ready(function() { 

     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.drawImage(imageObj, 69, 50); 
     }; 

     imageObj.src = '{{ url_for('static', filename='darth-vader.jpg') }}'; 

     $("#submit").click(function() { 
      var dataurl = canvas.toDataURL("image/png"); 
      $("#resized_image").val(dataurl); 
     }); 

    }); 

    </script> 

    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 

    <form method="post"> 

     {{ form.hidden_tag() }} 

     <input type="submit" value="Save" id="submit" name="submit" /> 

    </form> 

    </body> 
</html>