将matplotlib图形传递给HTML（flask）

一尘不染

将matplotlib图形传递给HTML（flask）

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

而且，你可能会猜到，当我加载页面时，我得到的仅仅是Image Placeholder。因此，他们不喜欢我提供的图形格式。

有谁知道matplotlib的哪些方法/解决方法可以将图形转换为实际图像？我到处都是这些文档，但找不到任何东西。谢谢！

顺便说一句：认为没有必要包含构成该图的python代码，但如果你们需要查看它，我可以将其包括在内（只是不想让这个问题杂乱无章）

阅读 1926

2020-04-05

共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) }}" alt="Image Placeholder" height="100">
  </body>
</html>

2020-04-05