Python 将matplotlib图形传递到HTML（flask）_Python_Html_Image_Matplotlib_Flask

Python 将matplotlib图形传递到HTML（flask）

python html image matplotlib flask

Python 将matplotlib图形传递到HTML（flask）,python,html,image,matplotlib,flask,Python,Html,Image,Matplotlib,Flask,我正在使用matplotlib在web应用程序中渲染一些图形。我以前在运行脚本时使用过fig.savefig（）。但是，我需要一个函数来返回一个实际的“.png”图像，这样我就可以用HTML调用它还有一些（可能不必要的）信息：我正在使用Python Flask。我想我可以使用fig.savefig（），将图粘贴到静态文件夹中，然后从HTML调用它，但我不希望每次都这样做。如果我能创建一个图形，从中生成一个图像，返回该图像，然后从我的HTML调用它，然后它就消失了，这将是最好的创建地物的代码可

我正在使用matplotlib在web应用程序中渲染一些图形。我以前在运行脚本时使用过

fig.savefig（）

。但是，我需要一个函数来返回一个实际的“.png”图像，这样我就可以用HTML调用它

还有一些（可能不必要的）信息：我正在使用Python Flask。我想我可以使用

fig.savefig（）

，将图粘贴到静态文件夹中，然后从HTML调用它，但我不希望每次都这样做。如果我能创建一个图形，从中生成一个图像，返回该图像，然后从我的HTML调用它，然后它就消失了，这将是最好的

创建地物的代码可以正常工作。但是，它会返回一个数字，我想这不适用于HTML

这里是我在布线中调用

draw\u polygon

的地方，

draw\u polygon

是返回图形的方法：

@app.route('/images/<cropzonekey>')
def images(cropzonekey):
    fig = draw_polygons(cropzonekey)
    return render_template("images.html", title=cropzonekey, figure = fig)

@app.route（“/images/”）
def图像（cropzonekey）：
图=绘制多边形（cropzonekey）
返回render_模板（“images.html”，title=cropzonekey，figure=fig）

这是我试图生成图像的HTML

<html>
  <head>
    <title>{{ title }} - image</title>
  </head>
  <body>
    <img src={{ figure }} alt="Image Placeholder" height="100">
  </body>
</html>


{{title}}-图像

而且，正如您可能猜到的，当我加载页面时，我得到的只是

图像占位符

。所以，他们不喜欢我输入数字的格式

有人知道matplotlib的哪些方法/工作方法可以将图形转换为实际图像吗？我看了这些文件，但什么也找不到。谢谢

顺便说一句：我不认为有必要包含制作这个图的python代码，但是如果你们需要看的话，我可以包含它（只是不想把问题弄得乱七八糟）

你必须将HTML和图像分成两条不同的路径

您的

/images/

路由将只为页面服务，并且在该页面的HTML内容中将引用第二个路由，即为图像服务的路由

<html>
  <head>
    <title>{{ title }} - image</title>
  </head>
  <body>
    <img src={{ figure }} alt="Image Placeholder" height="100">
  </body>
</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')

我正在使用Python3.x，我已经更改了一些代码行，它对我很有用。我收到以下错误消息：“……对象没有属性‘savefig’”

@app.route（“/fig/”）
def图（cropzonekey）：
#图=绘制多边形（cropzonekey）
图=plt.图（[1,2,3,4]，[1,2,3,4]）
#img=StringIO（）
img=BytesIO（）
#图savefig（img）
plt.savefig（img）
img.seek（0）
返回发送文件（img，mimetype='image/png'）

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

对于Python3

我有一个数据框，我想在烧瓶中显示这个图

因此，创建绘图的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编码的数据调用我的模板，如下所示

 {% if sunalt != None %}

      <h2>Sun Altitude during the year</h2>
    <img src="data:image/png;base64,{{ sunalt }}">
{% endif %}

return render\u模板（'where.html'，form=form，sunalt=sunalt2）

模板的相关部分（即图片位）如下所示

 {% if sunalt != None %}

      <h2>Sun Altitude during the year</h2>
    <img src="data:image/png;base64,{{ sunalt }}">
{% endif %}

{%if sunalt！=None%}
全年太阳高度
{%endif%}

希望对某人有所帮助……

Python 3 我经历了很多错误，比如-

由于未捕获异常“NSInternalInconsistencyException”而终止应用程序，原因：“NSWindow拖动区域应仅在主线程上无效
对于所有希望将matplotlib与flask结合使用并在python 3中的html页面上呈现图形的人，请看这里-
在\uuuu init\uuuuu.py

导入matplotlib
matplotlib.use（'Agg'）
将matplotlib.pyplot作为plt导入
从烧瓶导入烧瓶，渲染\u模板
从io导入字节io
导入base64
@应用程序路径（“/plot”）
def plot（）：
img=BytesIO（）
y=[1,2,3,4,5]
x=[0,2,1,3,4]
平面图（x，y）
plt.savefig（img，format='png'）
plt.close（）
img.seek（0）
plot_url=base64.b64encode（img.getvalue（））.decode（'utf8'）
返回渲染模板（'plot.html'，plot\u url=plot\u url）

在flaskr/templates/plot.html

<!doctype html>
<title>heatmap - </title>
<section>
  <h2>Heatmap</h2>
  <img src="data:image/png;base64, {{ plot_url }}">
</section>



热图-
热图
Miguel，首先，我想说你的烧瓶教程非常棒+我就是为了这个。但是，当我导航到该页面时，仍然会得到占位符文本。这是否可能是一个与烧瓶无关的问题（即，draw\u polygons（cropzonekey）返回的格式）
？安装我的更改后，导航到http://localhost:5000/fig/cropzonekey
在您的浏览器中。您当时看到图像了吗？哇，是的，它工作了。只是没有重新路由到正确的位置，但我可以修复。非常感谢，完美的答案！@Miguel您看到将matplolib web_agg后端与flask集成的任何更改吗？是一个示例将其集成到Tornado中的示例，但我不知道如何将其集成到flask中。在我将img=StringIO（）
切换到img=BytesIO（）时为我工作google Appengine最近做了一些让mpl更好地发挥作用的工作，讨论中包括了如何处理这类事情的示例。另一个选择是像ipython笔记本一样，将png转换为字符串，并直接嵌入其中。
<!doctype html>
<title>heatmap - </title>
<section>
  <h2>Heatmap</h2>
  <img src="data:image/png;base64, {{ plot_url }}">
</section>