Python 플라스크 ajax 이미지 가져 오기 - 마지막 EDIT가 문제입니다.

Question

어제부터 다른보기에서 특정보기의 인코딩 된 base64 이미지를 어떻게 사용할 수 있는지 이해하려고합니다.

원본 이미지 인 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 요청이므로 올바른 if 조건이 필요하며 작동 할 것입니다 (추측).

기본적으로 문제가 : 내 아약스 요청 및 I 모두 POST 요청입니다을 보내고 경로의 form.validate_on_submit(): 내가 너무 자주 잘못된 요청을 얻고, 그 이유는 충돌이있다. 사용자 지정 양식 확인란을 만들려고했습니다. 코드와 다른 if 조건을 옮기려고했습니다. 나는 그것을 얻지 못한다.

내 최근의 시도는 :

""" 
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는 캔버스에서 크기가 조정 된 이미지의 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) 

템플릿

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