पायथन फ्लास्क AJAX छवि प्राप्त करें - अंतिम EDIT समस्या

Question

कल से मैं समझने की कोशिश कर रहा हूं कि मैं किसी अन्य दृश्य में किसी निश्चित दृश्य से एन्कोडेड बेस 64 छवि का उपयोग कैसे कर सकता हूं।

मुझे अपने form.company_logo_image_path.data को प्रतिस्थापित करने की आवश्यकता है जो कि नई छवि के साथ मूल छवि है जिसका आकार बदल गया है। नई आकार की छवि AJAX के माध्यम से एक नए दृश्य में भेजी जाती है।

यहाँ मेरी 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 

मैं पर एक फ़ोल्डर में छवि को सहेज कर इस परीक्षण किया:

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

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

मैं कोई नया दृश्य जहां छवि डीकोड और 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 

अपवाद यहाँ गलत अनुरोध

इसके अलावा कैनवास अपने आप में एक बुरा अनुरोध में परिणाम का अनुरोध, ब्राउज़र नहीं करता है में कंसोल है मुझे कुछ उपयोगी बताएं जिसे मैं उपयोग/समझ सकता हूं।

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

संपादित

अंत में मैं कुछ गंभीर बना दिया: ग्रहण में कंसोल में के रूप में इसकी एक ही है, यह मार्ग में एक 400 गलत अनुरोध जहाँ मैं करने के लिए भेजने का प्रयास हो जाता है प्रगति! मैं 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 रूपों/बोतल विचारों/जावास्क्रिप्ट के बीच गुजर साथ घुलमिल जाएं लगते लगता है।

असल में, आपका जावास्क्रिप्ट कैनवास से आकार की छवि के डेटाURL के साथ आपके फॉर्म में एक छिपे हुए क्षेत्र को पॉप्युलेट करना चाहिए। यह तब आपके फ्लास्क व्यू पर सबमिट किया जाएगा, जहां आप डेटा को 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>