Python flask ajax görüntü al - son DÜZENLEME meselesi

Question

Dünden beri kodlanmış base64 görüntüsünü diğer bir görünümde belirli bir görünümden nasıl kullanabileceğimi anlamaya çalışıyorum.

Orijinal görüntüsü olan form.company_logo_image_path.data sayfamı yeniden boyutlandırılan yeni resimle değiştirmem gerekiyor. Yeniden boyutlandırılan yeni görüntü AJAX ile yeni bir görünüme gönderilir.

İşte

benim AJAX:

@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 

Ben bir klasöre görüntü kaydederek bu test:

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

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

Ben görüntü body değişkende deşifre ve depolanan yeni bir görünüm yarattı yerel makinem ve bu sayede vücut değişkeni yeniden boyutlandırılan görüntüyü doğru şekilde kaydediyordu.

Şimdi bunun AWS3 yüklenecektir bir diğer görüşe gönderilecek bu resim ihtiyacım var ve form.company_logo_image_path.data yerine bu resim kullanacağız:

@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) 

# ... 

Buradaki sorun bir Bad Request sitesini eğer almak olduğunu

İlk görünümden resize_image işlevinin sonucuna erişmeye çalışıyorum. Yeni Görüntüye nasıl erişebilirim? İşte benim ilerleme ile benim eski soru

---

Dünden beri bu sorun üzerinde çalışıyorum ve şimdiye kadar şimdiye kadar en büyük sorunu olduğunu: Old question with my progress and tries

DÜZENLEME

It Ne denediğim önemli değil, "/profil/unternehmen-bearbeiten"'a göndermek de kötü bir istek hatasıyla sonuçlanır.

veriler isteniyor a yerde kötü bir talebi getirir:

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

burada İstisna

Ayrıca kendisi kötü bir talebi getirir tuvali talebinde bozuk istek, tarayıcı doesnt konsoldur Bana kullanabileceğim/anlayabileceğim yararlı bir şey söyle. Sonunda bazı ciddi yapılmış

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

EDIT: Eclipse konsolunda gibi onun aynı, ben göndermek için denemek rotasında 400 Bad Request alır ilerleme! Verileri if form.validate_on_submit(): numaralı telefondan talep etmeye çalışıyordum. Kodu şimdi if form.validate_on_submit():'un dışına koydum ve şimdi veriyi isteyebilirim, hala sorun yaşıyorum, ama buradan çalışmaya devam edebilirim!

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(): 
    # ... 

Yine burada bir Kötü İstek alıyorum, ancak şimdi neden anlıyorum. form.validate_on_submit():'un kendisi bir POST isteğidir, bu yüzden doğruysa koşuluma ihtiyacım var ve işe yarayacak (sanırım).

Temelde sorun şu: Benim ajax isteği ve ben hem POST isteklerdir için gönderiyorum rotada form.validate_on_submit(): bu kadar sık ​​Bad Request alıyorum neden olduğu bir uyuşmazlık olması vardır. Özel form onay kutusunu oluşturmaya çalışıyordum. Kodları hareket ettirmeye çalışıyordum ve şartlar farklı. Sadece anlamadım.

Benim son çalışır:

""" 
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

Hepinize verileri HTML formları/Şişesi görünümleri/JavaScript arasından geçen öğeleriyle karışmasını gibi görünüyor gibi, bu konuda farklı bir yaklaşım gerek.

Temel olarak, Javascript'iniz, formunuzdaki gizli bir alanı, yeniden boyutlandırılan görüntünün dataURL değeriyle tuvalden doldurmalıdır. Bu, daha sonra verileri S3'e yükleyebileceğiniz Flask görünümünüze gönderilecektir.

Aşağıda, ne demek istediğimi gösteren basit bir örnek uygulamadır.

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) 

şablonları

<!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>