Adding matplotlib Figure directly into `<img>`'s tag `src`
The snippet can be accessed without any authentication.
Authored by
mstankie
This shows how to embed plot genertaed by matplotlib directly into HTML code in flask view.
generate_figure.py 908 B
from flask import render_template
import io
import base64
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
@app.route("/mysuperplot", methods=["GET"])
def plotView():
# Generate plot
fig = Figure()
axis = fig.add_subplot(1, 1, 1)
axis.set_title("title")
axis.set_xlabel("x-axis")
axis.set_ylabel("y-axis")
axis.grid()
axis.plot(range(5), range(5), "ro-")
# Convert plot to PNG image
pngImage = io.BytesIO()
FigureCanvas(fig).print_png(pngImage)
# Encode PNG image to base64 string
pngImageB64String = "data:image/png;base64,"
pngImageB64String += base64.b64encode(pngImage.getvalue()).decode('utf8')
return render_template("image.html", image=pngImageB64String)
# In the image.html jinja2 template use the following <img> to add the plot:
# <img src="{{ image }}"/>
Please register or sign in to comment