将matplotlib png转换为base64以在html模板中查看 [英] Converting matplotlib png to base64 for viewing in html template

问题描述

背景

你好，我正在试着做一个简单的web应用程序，按照教程计算一个衰减的振动方程并返回一个png结果给html页面被转换为Base64字符串后。
$ b

问题

应用程序的功能正常，除了计算结果时会返回一个破碎的图标，可能是因为Base64字符串无效。

疑难解答

我已经使用在线转换器将另一个png图像转换为Base64字符串，并使用< img src =data：image / png; base64，BASE64_STRING/> 成功显示图片。我相信模板格式适当。我也读过其他的答案这里和这里并尝试实施那些没有成功。

相关代码

以下是返回图片字符串的地方

  from numpy import exp，cos，linspace 
 import matplotlib.pyplot as plt 
 
 $ b $ （a，b，w）：
 return A * exp（-b * t）* cos（w * t）
 
 
 def compute（A ，b，w，T，resolution = 500）：
返回damped_vibration函数图的文件名。
t = linspace（0，T，resolution + 1）
u = damped_vibrations（t，A，b，w）
 plt.figure（）＃避免在曲线中添加曲线
 plt.plot（t，u）
 plt.title =％g，b =％g，w =％g'％（A，b，w））
 
 from io import BytesIO 
 figfile = BytesIO（）
 plt。 savefig（figfile，format ='png'）
 figfile.seek（0）＃回到文件开头
导入base64 
 #figdata_png = base64.b64encode（figfile.read（））
 figdata_png = base64.b64encode（figfile.getvalue（））
返回figdata_png 
  

以下是图片的显示位置

  {％if result！= None％} 
  {％endif％} 
  

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

解决方案

模板中的数据开始提供了一个线索。 &＃39; 是单引号'的HTML实体。结合前面的b， b'，它看起来像一个字节字符串的表示，而不是字符串的内容。

将字节串解码为一个字符串，然后用Jinja呈现它们。
$ b

  render_template（'result.html '，result = figdata_png.decode（'utf8'））
  

Jinja呈现字符串表示 {{}} 中的对象。一个字节字符串的字符串表示形式包括 b，以区别于Unicode字符串。所以你必须解码才能直接显示它们的值。

Background

Hello, I am trying to make a simple web app, following a tutorial, that calculates a dampened vibration equation and returns a png of the result to the html page after it has been converted to a Base64 string.

Problem

The app functions normally except that when the result is calculated, a broken image icon is returned, likely because the Base64 string is not valid.

Troubleshooting

I have converted another png image to a Base64 string using an online converter and used <img src="data:image/png;base64, BASE64_STRING"/> to display the image successfully. I believe the template is appropriately formatted. I have also read other SO answers here and here and tried implementing those without success.

Relevant code

Here is where the image string is returned

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

Here is where the image is displayed

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

If needed, I can provide the controller file as well. Thanks for any help!

解决方案

The beginning of the data in the template gives a clue to what's happening. ' is the HTML entity for a single quote '. Combined with the preceding b, b', it looks like the representation of a byte string, rather than the contents of the string.

Decode the byte string to a string before trying to render them with Jinja.

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

Jinja renders the string representation of objects in {{ }}. The string representation of a byte string includes the b'' to distinguish it from a Unicode string. So you have to decode in order to display their value directly.

这篇关于将matplotlib png转换为base64以在html模板中查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！