flask向html传函数,将matplotlib图传递给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.

我正在使用matplotlib在Web应用程序中呈现一些图形。我以前在运行脚本时使用过fig.savefig()。但是，我需要一个函数来返回一个实际的“.png”图像，以便我可以用我的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.

一些更多(可能是不必要的)信息：我正在使用Python Flask。我想我可以使用fig.savefig()并将图形粘贴在我的静态文件夹中，然后从我的HTML中调用它，但我不想每次都这样做。如果我可以创建图形，从中创建图像，返回该图像，并从我的HTML中调用它，那么它将是最佳的，然后它就会消失。

The code that creates the figure works. However, it returns a figure, which doesn't work with HTML I guess.

创建图形的代码有效。但是，它会返回一个数字，我想这与HTML不兼容。

Here's where I call the draw_polygon in the routing, draw_polygon is the method that returns the figure:

这是我在路由中调用draw_polygon的地方，draw_polygon是返回图形的方法：

@app.route('/images/')

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。

{{ title }} - image

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.

并且，正如您可能猜到的，当我加载页面时，我得到的只是Image Placeholder。所以，他们不喜欢我用这个数字输入的格式。

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!

有谁知道matplotlib方法/解决方法将图形变成实际图像？我满是这些文档，但我找不到任何东西。谢谢！

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)

顺便说一句：我认为没有必要包含制作这个数字的python代码，但是如果你们需要看到它的话我可以包含它(只是不想让问题混乱)

3 个解决方案

#1

26

You have to separate the HTML and the image into two different routes.

您必须将HTML和图像分成两个不同的路径。

Your /images/ 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.

您的/ images /

路径将仅为页面提供服务，并且在该页面的HTML内容中将引用第二条路线，即提供图像的路线。

The image is served in its own route from a memory file that you generate with savefig().

图像从您使用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/')

def images(cropzonekey):

return render_template("images.html", title=cropzonekey)

@app.route('/fig/')

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:

您的images.html模板变为：

{{ title }} - image

#2

1

I am working with Python 3.x, I have changed some lines of the code and it worked for me. I had the following error message: ".....object has no attribute 'savefig'"

我正在使用Python 3.x，我已经改变了一些代码行，它对我有用。我有以下错误消息：“.....对象没有属性'savefig'”

@app.route('/fig/')

def fig(cropzonekey):

#fig = draw_polygons(cropzonekey)

fig = plt.plot([1,2,3,4], [1,2,3,4])

#img = StringIO()

img = BytesIO()

#fig.savefig(img)

plt.savefig(img)

img.seek(0)

return send_file(img, mimetype='image/png')

#3

0

from flask import Flask, send_file

from io import StringIO

import matplotlib.pyplot as plt

from StringIO import StringIO

@app.route('/fig/')

def fig():

plt.plot([1,2,3,4], [1,2,3,4])

img = StringIO()

plt.savefig(img)

img.seek(0)

return send_file(img, mimetype='image/png')

The other answers are correct ,I just wanted to show the header files that has to be included. This program creates a simple graph and sends it over to the html page.

其他答案都是正确的，我只是想显示必须包含的头文件。该程序创建一个简单的图形并将其发送到html页面。