将matplotlib png转换为base64以在html模板中查看

Question

您好，我正在尝试制作一个简单的web应用程序，根据教程，它计算阻尼振动方程，并在转换为Base64字符串后将结果的png返回到html页面。

应用程序正常运行，但在计算结果时，会返回一个损坏的图像图标，这可能是因为Base64字符串无效。

我使用在线转换器将另一个png图像转换为Base64字符串，并使用

这里是返回图像字符串的地方

from numpy import exp, cos, linspace
import matplotlib.pyplot as plt


def damped_vibrations(t, A, b, w):
    return A*exp(-b*t)*cos(w*t)


def compute(A, b, w, T, resolution=500):
    """Return filename of plot of the damped_vibration function."""
    t = linspace(0, T, resolution+1)
    u = damped_vibrations(t, A, b, w)
    plt.figure()  # needed to avoid adding curves in plot
    plt.plot(t, u)
    plt.title('A=%g, b=%g, w=%g' % (A, b, w))

    from io import BytesIO
    figfile = BytesIO()
    plt.savefig(figfile, format='png')
    figfile.seek(0)  # rewind to beginning of file
    import base64
    #figdata_png = base64.b64encode(figfile.read())
    figdata_png = base64.b64encode(figfile.getvalue())
    return figdata_png

这里是图像显示的地方

{% if result != None %}
<img src="data:image/png;base64,{{ result }}"\>
{% endif %}

如果需要，我也可以提供控制器文件。谢谢你的帮助！




Answer 1

尝试将节meta charset=“utf-8”添加到模板的HEAD节中。这对我有用：-）

Answer 2

模板中数据的开头给出了正在发生的事情的线索<代码>

在尝试使用Jinja呈现字节字符串之前，将其解码为字符串。

render_template('result.html', result=figdata_png.decode('utf8'))

Jinja在{{}中呈现对象的字符串表示形式。字节字符串的字符串表示形式包括b'，以将其与Unicode字符串区分开来。所以你必须解码才能直接显示它们的值。