将 matplotlib 图传递给 HTML（烧瓶）
Posted
技术标签:
【中文标题】将 matplotlib 图传递给 HTML（烧瓶）【英文标题】：Passing a matplotlib figure to HTML (flask) 【发布时间】：2013-12-05 02:56:59 【问题描述】：我正在使用 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 - image</title>
</head>
<body>
<img src= figure >
</body>
</html>
而且，正如您可能猜到的，当我加载页面时，我得到的只是Image Placeholder。所以，他们不喜欢我输入这个数字的格式。
任何人都知道 matplotlib 方法/解决方法可以将图形变成实际图像吗？我到处都是这些文档，但我找不到任何东西。谢谢！
顺便说一句：认为没有必要包含制作该图的 python 代码，但如果你们需要查看它，我可以包含它（只是不想让问题变得混乱）
【问题讨论】：
最近做了一些工作以使 mpl 与 google appEnigne 配合得很好，有关此的讨论包括如何处理此类事情的示例。另一种选择是像 ipython notebook 那样做，它将 png 转换为字符串并直接嵌入。 【参考方案1】：您必须将 HTML 和图像分成两个不同的路径。
您的/images/<cropzonekey> 路由只会为页面提供服务，并且在该页面的 HTML 内容中将引用第二个路由，即提供图像的路由。
图像从您使用savefig() 生成的内存文件以自己的路径提供。
我显然没有对此进行测试，但我相信以下示例将按原样运行，或者让您非常接近可行的解决方案：
@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) " >
</body>
</html>
【讨论】：
Miguel，首先，只想说你的烧瓶教程太棒了。为此+1。但是，当我导航到该页面时，我仍然会收到占位符文本。是否可能是与flask无关的问题（即draw_polygons(cropzonekey)返回的格式？
安装我的更改后，在浏览器中导航到http://localhost:5000/fig/cropzonekey。那你看到图片了吗？
哇，是的，它奏效了。只是没有重新路由到正确的地方，但我可以解决这个问题。非常感谢，完美的答案！
@Miguel 您是否看到将 matplolib web_agg 后端与烧瓶集成的任何变化？ Here 是一个将它集成到 Tornado 中的示例，但是我不知道如何将它集成到烧瓶中。
当我将 img = StringIO() 切换到 img = BytesIO() 时为我工作【参考方案2】：
我正在使用 Python 3.x，我更改了一些代码行，它对我有用。我收到以下错误消息：".....object has no attribute 'savefig'"
@app.route('/fig/<cropzonekey>')
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】：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')
其他答案是正确的，我只是想显示必须包含的头文件。 该程序创建一个简单的图形并将其发送到 html 页面。
【讨论】：
【参考方案4】：对于 Python3 ....
我有一个 DataFrame，我想在 Flask 中显示这个图 ....
所以创建一个 Base64 图像的情节。
df_week_min_az = pd.DataFrame.from_dict(week_max_az.to_dict(),
orient='index', columns=['min_az'])
sunalt = df_week_max_angle.plot().get_figure()
buf = io.BytesIO()
sunalt.savefig(buf, format='png')
buf.seek(0)
buffer = b''.join(buf)
b2 = base64.b64encode(buffer)
sunalt2=b2.decode('utf-8')
我现在使用这样的 base64 编码数据调用我的模板......
return render_template('where.html', form=form, sunalt=sunalt2)
模板的相关部分（即图片位）如下所示......
% if sunalt != None %
<h2>Sun Altitude during the year</h2>
<img src="data:image/png;base64, sunalt ">
% endif %
希望对某人有所帮助....
【讨论】：
【参考方案5】：Python 3
我遇到了很多错误，例如 -
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'NSWindow drag regions should only be invalidated on the Main Thread!
对于所有想要将 matplotlib 与烧瓶一起使用并在 python 3 中的 html 页面上呈现图形的人，这里是 -
在__init__.py
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from flask import Flask, render_template
from io import BytesIO
import base64
@app.route('/plot')
def plot():
img = BytesIO()
y = [1,2,3,4,5]
x = [0,2,1,3,4]
plt.plot(x,y)
plt.savefig(img, format='png')
plt.close()
img.seek(0)
plot_url = base64.b64encode(img.getvalue()).decode('utf8')
return render_template('plot.html', plot_url=plot_url)
在flaskr/templates/plot.html
<!doctype html>
<title>heatmap - </title>
<section>
<h2>Heatmap</h2>
<img src="data:image/png;base64, plot_url ">
</section>
【讨论】：
【参考方案6】：这对我来说效果很好，你也可以查看这个 URL medium blog
from flask import Flask, render_template
from PIL import Image
import base64
import io
app = Flask(__name__)
@app.route('/')
def show_image():
# Your plt plots instructions here
# plt.save('generated_plot.png')
im = Image.open("generated_plot.png") #Open the generated image
data = io.BytesIO()
im.save(data, "png")
encoded_img_data = base64.b64encode(data.getvalue())
return render_template("show_image.html", img=encoded_img_data.decode('utf-8'))
if __name__ == '__main__':
app.run(debug=True)
【讨论】：
以上是关于将 matplotlib 图传递给 HTML（烧瓶）的主要内容，如果未能解决你的问题，请参考以下文章
Python：如何在烧瓶中显示 matplotlib [重复]