我们正试图通过在网站上生成新图片来更改用户的个人资料图片。我们尝试通过从HTML代码创建画布然后使用 toDataURL 函数通过使用此数据发布表单（输入类型='文件'）将图片数据发送到服务器来执行此操作。
当我们从计算机中选择一个文件但我们无法在尝试将imageData（从画布）附加到表单时使其工作。
我发现了多个不完全的替代方案可以做到这一点，但没有什么能真正起作用。我们可能无法像我们一样设置输入值= imageData，但是我们已经尝试了其他功能，但是我们就这样做了。
提供的代码可能会有所帮助，但也可以有一般的解决方案。
最后，我们仍然是初学者，并在网上搜索了整整两天的解决方案。我们找到了一些替代解决方案，但也无法让它完全发挥作用。非常感谢！
我们发现的一些链接几乎有用：
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
这是python文件（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()
这是终端消息：
* 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
HTML文件的一部分
<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>