We are trying to change a profile picture of a user by generating a new picture on the website. We try to do this by creating a canvas from the HTML code and then use the toDataURL function to send the picture-data to the server by posting a form (input type='file') with this data.
It works when we select a file from the computer but we can't make it work when trying to append the imageData (from the canvas) to the form.
I have found multiple incomplete alternatives on how one could do this but there is nothing that really made it work. We probably can't set the input value=imageData as we do but we have tried so mush else that does not work either, so we leave it like this.
The code provided is probably helpful but there could be a general solution to this as well.
Lastly, we are still beginners and have searched the web for solutions for two full days. We found some alternative solutions but could never get it to work fully either. Many thanks!
Some links that we found almost helpful:
Convert HTML5 Canvas into File to be uploaded?
How to save a HTML5 Canvas as Image on a server
Convert Data URI to File then append to FormData
This is the python file (my_app.py)
from flask import Flask, url_for, render_template, request, redirect
app=Flask(__name__)
from flask_uploads import UploadSet, configure_uploads, IMAGES
photos = UploadSet('photos', IMAGES)
app.config['UPLOADED_PHOTOS_DEST'] = 'static/uploads'
configure_uploads(app, photos)
@app.route('/abc_test/', methods=["GET", "POST"])
def abc_test():
if request.method=='POST':
print("It is a POST request")
try:
print(request.form['PHOTO'])
except Exception as e:
print(('exception 1:', e))
try:
print(request.files['PHOTO'])
except Exception as e:
print(('exception 2:', e))
try:
filename=photos.save(request.files['PHOTO'])
print("filename")
picture=unicode(filename)
current_user.picture=picture
db.session.commit()
return redirect(url_for('abc_test'))
except Exception as e:
print(('exception 3:', e))
return 'DID NOT SAVE IMAGE'
print("did not POST")
return render_template('abc_test.html')
if __name__ == '__main__':
app.run()
This is the terminal message:
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
did not POST
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /abc_test/ HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/normalize.css HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/maincss.css HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/abc_test.css HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/js/abc_test.js HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/js/html2canvas.min.js HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/js/promise.min.js HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:05] "GET /static/normalize.css HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:05] "GET /static/maincss.css HTTP/1.1" 200 -
127.0.0.1 - - [13/Apr/2017 11:49:05] "GET /static/abc_test.css HTTP/1.1" 200 -
It is a POST request
('exception 1:', <BadRequestKeyError '400: Bad Request'>)
<FileStorage: u'' ('application/octet-stream')>
('exception 3:', UploadNotAllowed())
127.0.0.1 - - [13/Apr/2017 11:49:07] "POST /abc_test/ HTTP/1.1" 200 -here
Part of the HTML file
<div class="main_div"></div> //This tag will be used to build a blue canvas (sort of picture)
<form action="{{ url_for('abc_test') }}" enctype="multipart/form-data" method="POST" name='{{ form }}' >
<button type="button" onclick="generate_new_image();">Generate new picture</button>
<button type="button" onclick="getScreenshot()">Use this image as profile</button>
<input type="file" value="" name="PHOTO">
<input type="submit" name="submit">
<div class="print_image">
</div>
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src='{{ url_for("static", filename="js/abc_test.js")}}'></script>
<script src='{{ url_for("static", filename="js/html2canvas.min.js")}}'></script>
<script src='{{ url_for("static", filename="js/promise.min.js")}}'></script>
<script>
function generate_new_image() {
$(".main_div").css("background-color", "blue");
}
function getScreenshot() {
html2canvas($(".main_div"), {
onrendered: function(canvas) {
$(".print_image").html("");
$(".print_image").append(canvas);
var imageData = canvas.toDataURL("image/png");
document.getElementsByName("PHOTO")[0].setAttribute("value", imageData);
console.log(document.getElementsByName("PHOTO")[0]);
//value above gives: (index):145 <input type="file" value="data:image/png;base64,iVBORw0KGgo ... T+T4Hztrdtz9vp4w+4V/GOh0dkhwAAAABJRU5ErkJggg==" name="PHOTO">
}
});
}
</script>
