如何通过 render_template 将渲染图传递给 html 文件？答案

【问题标题】：How to pass rendered plot to a html file through render_template?如何通过 render_template 将渲染图传递给 html 文件？
【发布时间】：2019-05-14 23:38:38
【问题描述】：

我正在关注这个answer，我想使用 render_template 来调用我的 html 文件，而不是直接在我的 py 中运行 plot。

我想使用类似的东西：

return render_template('hello.html', plot_url)

代替：

return '<img src="data:image/png;base64,{}">'.format(plot_url)

我的问题是，是否有任何方法可以将绘图传递给 html 文件，然后在烧瓶中运行？

编辑：

@app.route('/')
def build_Plot():
    y = [1, 2, 3, 4, 5]
    x = [0, 2, 1, 3, 4]
    plt.plot(x, y)
    output = io.BytesIO()
    plt.savefig(output, format='png')
    output.seek(0)
    plot_data = base64.b64encode(output.getvalue()).decode()
    return render_template("home.html", url=plot_data)

在 home.html 中：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyFlaskApp</title>
    </head>
    <body>
        {% block body %}
            <img src="data:image/png;base64 = {{ url }} "/>
        {% endblock %}
    </body>
</html>

【问题讨论】：

标签： python html python-3.x flask server

【解决方案1】：

首先，要足够注意你的html文件名，我看到两个不同的名字，hello.html和home.html。然后尝试使用matplotlib.backends.backend_agg如下：

from base64 import b64encode
from io import BytesIO
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
@app.route('/')
def build_Plot():
    output = io.BytesIO()
    y = [1, 2, 3, 4, 5]
    x = [0, 2, 1, 3, 4]
    plt.plot(x, y)
    f = plt.figure()
    canvas = FigureCanvas(f)
    canvas.print_png(output)
    plot_data= b64encode(output.getvalue()).decode('ascii')
    output.seek(0)
    return render_template("home.html", url=plot_data)

通过这种方式，它让画布写入内存文件，然后将生成的 PNG 数据编码为 base64 并插入数据 URL。

【讨论】：

成功了！我做了一些改变，现在按预期工作。非常感谢你

【解决方案2】：

plot_url 实际上存储的是图像的 URL。所以如果你已经有一个像 hello.html 这样的 HTML 页面，你可以在渲染它的时候这样做：

你好.html：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyFlaskApp</title>
    </head>
    <body>
        {% block body %}
            {% if plot %}
                <img src="data:image/png;base64,{{url}}">
            {% endif %}
        {% endblock %}
    </body>
</html>

在 Python 文件中，您可以执行以下操作：

return render_template("hello.html",plot=True, url=plot_url)

注意 plot_url 来自您链接的答案中提到的base64.b64encode(img.getvalue()).decode() 行。

【讨论】：

不起作用。当我使用我的解决方案运行页面时，它可以工作，但是使用您的解决方案不会在本地主机页面中加载任何绘图
刚刚改了，可以试试吗？在 url 周围添加了一对额外的大括号。
给我错误：jinja2.exceptions.TemplateSyntaxError: expected token ':', got '}'
请进行最新编辑，对于这个愚蠢的错误，我深表歉意。
不幸的是没有再次加载情节

【解决方案3】：

假设您的意思是将图像与页面一起传递（而不是在 img 标记中包含 URL，数据 URL 的格式表明您需要

<img src="data:image/png;base64,{{ data }}" />

其中data 是图像的 PNG 表示的 base64 编码。

但如果你的意思是传递一个 URL，那么你会想要类似的东西

<img src="{{ url }}" />

其中url 是指向应用中视图方法的链接，该方法将返回非base64 编码的图像。

【讨论】：

我尝试了您的解决方案，但得到了回应：127.0.0.1 - - [13/Dec/2018 23:40:03] "GET /iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCA.......hAAAAAy/w/ eHm5zQpnsLwAAAAASUVORK5CYII= HTTP/1.1" 404 -
对于第二个，它只是得到一个长刺，而不是像 223 或 404 这样的数字......并且不会在本地页面中加载绘图
我提供了两种解决方案。看起来您尝试将 base64 编码的图像（这是第一个解决方案想要的）传递给第二个。
在我的代码中，plot_url = base64.b64encode(output.getvalue()).decode() 和 type(plot_url)==<type 'unicode'> 。不知道我该怎么办！！我正在使用 plot_url 这种格式，因为我想要一个动态图。
那么，假设output.getvalue() 真的是一个PNG，<img src="data:image/png;base64,{{ plot_url }}" /> 就是你想要的，虽然plot_url 这个名字有误导性。真的是plot_data。如果这不起作用，您需要向我们展示通往output 的代码。