将matplotlib图传递给HTML（瓶） [英] Passing a matplotlib figure to HTML (flask)
问题描述
我正在使用matplotlib在Web应用程序中渲染一些图形。在我刚刚运行脚本之前，我已经使用了 fig.savefig（）。然而，我需要一个函数返回一个实际的.png图像，以便我可以用我的HTML调用它。
更多（可能不必要的）信息：我使用Python Flask。我想我可以使用 fig.savefig（），然后将这个图粘贴到我的静态文件夹中，然后从我的HTML中调用它，但是我宁愿不要每次都这样做。如果我能够创建这个图形，从中创建一个图像，返回这个图像，并从我的HTML中调用它，那么它将是最优的，然后它就会消失。
创建该图的代码有效。然而，它返回一个数字，这不适用于HTML我猜。
这里是我调用 draw_polygon 在路由中， draw_polygon 是返回数字的方法：
@ app.route（'/ images /< cropzonekey>'）
def images（cropzonekey）：
fig = draw_polygons（cropzonekey）
return render_template（images.html，title = cropzonekey，figure = fig）
这里是我尝试生成图像的HTML。
< html>
< head>
< title> {{title}} - 图片< / title>
< / head>
< body>
< img src = {{figure}} alt =图片占位符height =100>
< / body>
< / html>
而且，正如您大概猜测的那样，当我加载页面时，我得到的是图片占位符。所以，他们不喜欢我给这个数字的格式。
任何人都知道matplotlib方法/变通方法将一个数字变成一个实际的图像吗？我遍布这些文件，但我找不到任何东西。谢谢！
顺便说一句：没有想到有必要包含这个数字的python代码，但是如果你们需要看到它，我可以包含它不想混乱这个问题）
你必须将HTML和图像分隔成两个不同的路径。 p>
您的 / images /< cropzonekey> 路由只会提供页面，并且在那个页面的HTML内容中将会是对第二条路径的引用，即为图像提供服务的路径。
图像以自己的路径从您用<$ c生成的内存文件$ c $> savefig（）。
我明显没有测试这个，但是我相信下面的例子会按原样工作，你很接近一个工作的解决方案：
$ p $ @ app.route（'/ images /< cropzonekey>'）
def image（cropzonekey）：
return render_template（images.html，title = cropzonekey）
@app。 route（'/ fig /< cropzonekey>'）
def fig（cropzonekey）：
fig = draw_polygons（cropzonekey）
img = StringIO（）
fig.savefig（img ）
img.seek（0）
return send_file（img，mimetype ='image / png'）
您的 images.html 模板成为：
< HTML>
< head>
< title> {{title}} - 图片< / title>
< / head>
< body>
< img src ={{url_for（'fig'，cropzonekey = title）}}alt =图片占位符height =100>
< / body>
< / html>
I am using matplotlib to render some figure in a web app. I've used fig.savefig() before when I'm just running scripts. However, I need a function to return an actual ".png" image so that I can call it with my HTML.
Some more (possibly unnecessary) info: I am using Python Flask. I figure I could use fig.savefig() and just stick the figure in my static folder and then call it from my HTML, but I'd rather not do that every time. It would be optimal if I could just create the figure, make an image out of it, return that image, and call it from my HTML, then it goes away.
The code that creates the figure works. However, it returns a figure, which doesn't work with HTML I guess.
Here's where I call the draw_polygon in the routing, draw_polygon is the method that returns the figure:
@app.route('/images/<cropzonekey>')
def images(cropzonekey):
fig = draw_polygons(cropzonekey)
return render_template("images.html", title=cropzonekey, figure = fig)
And here is the HTML where I am trying to generate the image.
<html>
<head>
<title>{{ title }} - image</title>
</head>
<body>
<img src={{ figure }} alt="Image Placeholder" height="100">
</body>
</html>
And, as you can probably guess, when I load the page, all I get is Image Placeholder. So, they didn't like the format I fed the figure in with.
Anyone know what matplotlib methods/work-arounds turn a figure into an actual image? I am all over these docs but I can't find anything. Thanks!
BTW: didn't think it was necessary to include the python code that makes the figure, but I can include it if You guys need to see it (just didn't want to clutter the question)
You have to separate the HTML and the image into two different routes.
Your /images/<cropzonekey> route will just serve the page, and in the HTML content of that page there will be a reference to the second route, the one that serves the image.
The image is served in its own route from a memory file that you generate with savefig().
I obviously didn't test this, but I believe the following example will work as is or will get you pretty close to a working solution:
@app.route('/images/<cropzonekey>')
def images(cropzonekey):
return render_template("images.html", title=cropzonekey)
@app.route('/fig/<cropzonekey>')
def fig(cropzonekey):
fig = draw_polygons(cropzonekey)
img = StringIO()
fig.savefig(img)
img.seek(0)
return send_file(img, mimetype='image/png')
Your images.html template the becomes:
<html>
<head>
<title>{{ title }} - image</title>
</head>
<body>
<img src="{{ url_for('fig', cropzonekey = title) }}" alt="Image Placeholder" height="100">
</body>
</html>
这篇关于将matplotlib图传递给HTML（瓶）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
