Passing a matplotlib figure to HTML (flask)
You have to separate the HTML and the image into two different routes.
Your /images/<cropzonekey> route will just serve the page, and in the HTML content of that page there will be a reference to the second route, the one that serves the image.
The image is served in its own route from a memory file that you generate with savefig().
I obviously didn't test this, but I believe the following example will work as is or will get you pretty close to a working solution:
@app.route('/images/<cropzonekey>')def images(cropzonekey): return render_template("images.html", title=cropzonekey)@app.route('/fig/<cropzonekey>')def fig(cropzonekey): fig = draw_polygons(cropzonekey) img = StringIO() fig.savefig(img) img.seek(0) return send_file(img, mimetype='image/png')Your images.html template the becomes:
<html> <head> <title>{{ title }} - image</title> </head> <body> <img src="{{ url_for('fig', cropzonekey = title) }}" alt="Image Placeholder" height="100"> </body></html>
For Python3 ....
I have a DataFrame, I want to show this plot in Flask ....
So Create a Base64 Image of the plot.
df_week_min_az = pd.DataFrame.from_dict(week_max_az.to_dict(), orient='index', columns=['min_az']) sunalt = df_week_max_angle.plot().get_figure() buf = io.BytesIO() sunalt.savefig(buf, format='png') buf.seek(0) buffer = b''.join(buf) b2 = base64.b64encode(buffer) sunalt2=b2.decode('utf-8')I now call my template using the base64 encoded data like this....
return render_template('where.html', form=form, sunalt=sunalt2)
The relevant part of the template (i.e. the picture bit) looks like this....
{% if sunalt != None %} <h2>Sun Altitude during the year</h2> <img src="data:image/png;base64,{{ sunalt }}">{% endif %}Hope that helps someone....
Python 3
I went through a lot of trouble with errors like - Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'NSWindow drag regions should only be invalidated on the Main Thread!
For all those who want to use matplotlib with flask and render the graph on an html page in python 3, here you go -
In the __init__.py
import matplotlibmatplotlib.use('Agg')import matplotlib.pyplot as pltfrom flask import Flask, render_templatefrom io import BytesIOimport base64 @app.route('/plot') def plot(): img = BytesIO() y = [1,2,3,4,5] x = [0,2,1,3,4] plt.plot(x,y) plt.savefig(img, format='png') plt.close() img.seek(0) plot_url = base64.b64encode(img.getvalue()).decode('utf8') return render_template('plot.html', plot_url=plot_url)In flaskr/templates/plot.html
<!doctype html><title>heatmap - </title><section> <h2>Heatmap</h2> <img src="data:image/png;base64, {{ plot_url }}"></section>