使用 dataURL 和 Flask 将画布图像保存到服务器

Question

我们正在尝试通过在网站上生成新图片来更改用户的个人资料图片。我们尝试通过从 HTML 代码创建画布来实现此目的，然后使用toDataURL函数通过发布包含此数据的表单（输入类型=\'file\'）将图片数据发送到服务器。

\n\n

当我们从计算机中选择文件时它可以工作，但当尝试将图像数据（从画布）附加到表单时我们无法使其工作。

\n\n

我已经找到了多种不完整的替代方案来解决如何做到这一点，但没有什么可以真正使其发挥作用。我们可能无法像我们那样设置输入值=imageData，但我们尝试了很多其他方法也不起作用，所以我们就这样保留它。

\n\n

提供的代码可能会有帮助，但也可能有一个通用的解决方案。

\n\n

最后，我们还是初学者，已经在网上搜索了整整两天的解决方案。我们找到了一些替代解决方案，但也无法使其完全发挥作用。非常感谢！

\n\n

我们发现一些几乎有用的链接：

\n\n

将 HTML5 Canvas 转换为要上传的文件？

\n\n

如何在服务器上将 HTML5 Canvas 保存为图像

\n\n

将数据 URI 转换为文件，然后附加到 FormData

\n\n

这是Python文件（my_app.py）

\n\n

from flask import Flask, url_for, render_template, request, redirect\napp=Flask(__name__)\nfrom flask_uploads import UploadSet, configure_uploads, IMAGES\nphotos = UploadSet(\'photos\', IMAGES)\napp.config[\'UPLOADED_PHOTOS_DEST\'] = \'static/uploads\'\nconfigure_uploads(app, photos)\n\n@app.route(\'/abc_test/\', methods=["GET", "POST"])\ndef abc_test():\n    if request.method==\'POST\':\n        print("It is a POST request")\n        try:\n            print(request.form[\'PHOTO\'])\n        except Exception as e:\n            print((\'exception 1:\', e))\n        try:\n            print(request.files[\'PHOTO\'])\n        except Exception as e:\n            print((\'exception 2:\', e))\n        try:\n            filename=photos.save(request.files[\'PHOTO\'])\n            print("filename")\n            picture=unicode(filename)\n            current_user.picture=picture\n            db.session.commit()\n            return redirect(url_for(\'abc_test\'))\n        except Exception as e:\n            print((\'exception 3:\', e))\n        return \'DID NOT SAVE IMAGE\'\n    print("did not POST")\n    return render_template(\'abc_test.html\')\n\nif __name__ == \'__main__\':\n    app.run()\n

\n\n

这是终端消息：

\n\n

     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\ndid not POST\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /abc_test/ HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/normalize.css HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/maincss.css HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/abc_test.css HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/js/abc_test.js HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/js/html2canvas.min.js HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:00] "GET /static/js/promise.min.js HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:05] "GET /static/normalize.css HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:05] "GET /static/maincss.css HTTP/1.1" 200 -\n127.0.0.1 - - [13/Apr/2017 11:49:05] "GET /static/abc_test.css HTTP/1.1" 200 -\nIt is a POST request\n(\'exception 1:\', <BadRequestKeyError \'400: Bad Request\'>)\n<FileStorage: u\'\' (\'application/octet-stream\')>\n(\'exception 3:\', UploadNotAllowed())\n127.0.0.1 - - [13/Apr/2017 11:49:07] "POST /abc_test/ HTTP/1.1" 200 -here\n

\n\n

HTML 文件的一部分

\n\n

  <div class="main_div"></div> //This tag will be used to build a blue canvas (sort of picture)\n\n  <form action="{{ url_for(\'abc_test\') }}"  enctype="multipart/form-data"  method="POST" name=\'{{ form }}\' >\n    <button type="button" onclick="generate_new_image();">Generate new picture</button>\n    <button type="button" onclick="getScreenshot()">Use this image as profile</button>\n\n    <input type="file" value="" name="PHOTO">\n    <input type="submit" name="submit">\n    <div class="print_image">\n    </div>\n  </form>\n\n\n<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>\n<script src=\'{{ url_for("static", filename="js/abc_test.js")}}\'></script>\n<script src=\'{{ url_for("static", filename="js/html2canvas.min.js")}}\'></script>\n<script src=\'{{ url_for("static", filename="js/promise.min.js")}}\'></script>\n<script>\n  function generate_new_image() {\n    $(".main_div").css("background-color", "blue");\n  }\n\n  function getScreenshot() {\n    html2canvas($(".main_div"), {\n      onrendered: function(canvas) {\n        $(".print_image").html("");\n        $(".print_image").append(canvas);\n\n        var imageData = canvas.toDataURL("image/png");\n        document.getElementsByName("PHOTO")[0].setAttribute("value", imageData);\n\n        console.log(document.getElementsByName("PHOTO")[0]);\n        //value above gives: (index):145 <input type=\xe2\x80\x8b"file" value=\xe2\x80\x8b"data:\xe2\x80\x8bimage/\xe2\x80\x8bpng;\xe2\x80\x8bbase64,iVBORw0KGgo ... T+T4Hztrdtz9vp4w+4V/\xe2\x80\x8bGOh0dkhwAAAABJRU5ErkJggg==" name=\xe2\x80\x8b"PHOTO">\xe2\x80\x8b\n      }\n    });\n  }\n</script>\n

\n