将 matplotlib 图传递给 HTML(烧瓶) [英] Passing a matplotlib figure to HTML (flask)
问题描述
我正在使用 matplotlib 在 Web 应用程序中渲染一些图形.我之前在运行脚本时使用过 fig.savefig() .但是，我需要一个函数来返回一个实际的.png"图像，以便我可以用我的 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.
更多(可能是不必要的)信息:我正在使用 Python Flask.我想我可以使用 fig.savefig() 并将图形粘贴在我的静态文件夹中，然后从我的 HTML 中调用它，但我不想每次都这样做.如果我可以创建图形，从中制作图像，返回该图像，然后从我的 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.
创建图形的代码有效.但是，它返回一个数字，我猜它不适用于 HTML.
The code that creates the figure works. However, it returns a figure, which doesn't work with HTML I guess.
这里是我在路由中调用draw_polygon的地方，draw_polygon是返回图形的方法:
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)
这是我尝试生成图像的 HTML.
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>
而且，正如您可能猜到的，当我加载页面时，我得到的只是Image Placeholder.所以，他们不喜欢我输入数字的格式.
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.
有谁知道 matplotlib 的哪些方法/变通方法可以将图形转换为实际图像?我到处都是这些文档，但我找不到任何东西.谢谢！
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!
顺便说一句:认为没有必要包含制作图形的python代码，但如果你们需要看到它，我可以包含它(只是不想把问题弄乱)
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)
推荐答案
你必须将 HTML 和图像分成两条不同的路线.
You have to separate the HTML and the image into two different routes.
您的 /images/ 路由将只提供页面，并且在该页面的 HTML 内容中将引用第二个路由，即提供图像的路由.
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.
图像从您使用 savefig() 生成的内存文件中以自己的方式提供.
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')
您的 images.html 模板将变为:
<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屋！
