Python flask ajax get image - last EDIT is the issue
I think you need a different approach with this, as you seem to be getting mixed up with all the data passing between HTML forms/Flask views/Javascript.
Basically, your Javascript should be populating a hidden field in your Form with the dataURL of the resized image from the canvas. This will then be submitted to your Flask view, where you can upload the data to S3.
Below is a simple example application illustrating what I mean.
app.py
from flask import Flask, url_for, redirect, render_templatefrom flask_wtf import Formfrom wtforms import HiddenFieldimport base64class 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 bodyif __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>