Как передать визуализированный сюжет в HTML-файл через render_template? - PullRequest
Новая
       1

Как передать визуализированный сюжет в HTML-файл через render_template?

0 голосов
/ 13 декабря 2018

Я слежу за этим ответом , и я хочу использовать render_template для вызова моего html-файла вместо непосредственного запуска plot в моем py.

Я хочу использовать что-то вроде: 

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>

Ответы [ 3 ]

0 голосов
/ 14 декабря 2018

Если вы хотите передать изображение вместе со страницей (вместо включения URL-адреса в тег img, формат URL-адресов данных ghe предполагает, что вам нужно 

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

, где dataэто base64-кодировка PNG-представления изображения.

Но если вы хотите передать URL-адрес, вам нужно что-то вроде 

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

, где urlссылка на метод представления в вашем приложении, который возвращает не кодированное в base64 изображение.

0 голосов
/ 16 декабря 2018

Прежде всего, уделите достаточно внимания имени вашего 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 данных.

0 голосов
/ 13 декабря 2018

plot_url фактически хранит URL-адрес изображения.Поэтому, если у вас уже есть HTML-страница, такая как hello.html, вы можете сделать это во время ее рендеринга:

hello.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(), упомянутой в ответе, который вы связали.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...