Преобразование Matplotlib PNG в Base64 для просмотра в HTML-шаблон

Фон

Здравствуйте, я пытаюсь создать простое веб-приложение после учебника, которое вычисляет демпфированное уравнение вибрации и возвращает png результата на html-страницу после его преобразования в строку Base64.

проблема

Приложение работает нормально, за исключением того, что при вычислении результата возвращается значок с разорванным изображением, вероятно, из-за недопустимой строки Base64.

Поиск проблемы

Я преобразовал другое изображение PNG в строку Base64 с помощью онлайн-конвертера и использовал <img src="data:image/png;base64, BASE64_STRING"/> для отображения изображения успешно. Я считаю, что шаблон правильно отформатирован. Я также прочитал другие ответы SO здесь и здесь и попытался реализовать их безуспешно.

Соответствующий код

Вот где возвращается строка изображения

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 %}

При необходимости я также могу предоставить файл контроллера. Спасибо за любую помощь!

Источник

2 ответа

Решение

Начало данных в шаблоне дает представление о том, что происходит. &#39; является HTML-сущностью для одиночной кавычки ', В сочетании с предыдущим б, b'выглядит как представление строки байтов, а не как содержимое строки.

Декодируйте строку байта в строку, прежде чем пытаться отобразить их с помощью Jinja.

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

Jinja отображает строковое представление объектов в {{ }}, Строковое представление байтовой строки включает в себя b'' чтобы отличить его от строки Unicode. Таким образом, вы должны декодировать, чтобы отобразить их значение напрямую.

Источник

Попробуйте добавить раздел meta charset="utf-8" в раздел HEAD вашего шаблона. Это сработало для меня:-)

Источник
Другие вопросы по тегам