Python flask ajax 获取图像 - 最后编辑是问题

Question

从昨天开始，我一直在尝试了解如何在另一个 View 中使用来自某个 View 的编码 base64 图像。

我需要用调整大小的新图像替换原始图像的 form.company_logo_image_path.data。新调整大小的图像通过 AJAX 发送到新 View 。

这是我的 AJAX:

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

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

我创建了一个新 View ，其中图像被解码并存储在 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

我通过将图像保存到本地计算机上的文件夹来对此进行测试，它起作用了，因此 body 变量正确存储了调整大小的图像。

现在我需要将这张图片发送到另一个 View ，在那里它将上传到 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)

# ...

这里的问题是，如果我尝试从第一个 View 访问 resize_image 函数的结果，我会得到一个 Bad Request 站点。如何访问新图像？

---

我从昨天开始就在研究这个问题，这是我迄今为止遇到的最大问题，这是我的老问题和我的进展: Old question with my progress and tries

编辑

不管我尝试什么，发送到 "/profil/unternehmen-bearbeiten" 也会导致错误的请求错误。

在任何地方请求数据 a 都会导致错误请求:

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

这里的异常是错误的请求

请求 Canvas 本身也会导致错误请求，浏览器中的控制台不会告诉我一些我可以使用/理解的有用信息。它与 Eclipse 中的控制台相同，它在我尝试发送到的路由中收到 400 Bad Request:

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 请求，所以我需要正确的 if 条件，它会起作用(我猜)。

基本上问题是:我的 ajax 请求和我发送到的路由中的 form.validate_on_submit(): 都是 POST 请求，这就是为什么我经常收到 Bad Request 的原因，那里是冲突。我正在尝试创建一个自定义表单复选框。我正在尝试移动代码和其他不同的 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 表单/Flask View /Javascript 之间传递的所有数据。

基本上，您的 Javascript 应该使用 Canvas 中已调整大小的图像的 dataURL 填充表单中的隐藏字段。然后这将被提交到您的 Flask View ，您可以在其中将数据上传到 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)

templates/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>