Passing a matplotlib figure to HTML (flask)

by

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="https://stackoverflow.com/questions/20107414/{{ url_for("fig', cropzonekey = title) }}" alt="Image Placeholder" height="100">
  </body>
</html>

More Related Contents:

  1. How to store an image in a variable
  2. Converting matplotlib png to base64 for viewing in html template
  3. Sending data from HTML form to a Python script in Flask
  4. Matplotlib (pyplot) savefig outputs blank image
  5. Set Matplotlib colorbar size to match graph
  6. Post values from an HTML form and access them in a Flask view
  7. Application not picking up .css file (flask/python) [duplicate]
  8. scipy: savefig without frames, axes, only content
  9. Interactive pixel information of an image in Python?
  10. Python: How to show matplotlib in flask [duplicate]
  11. Display a ‘loading’ message while a time consuming function is executed in Flask
  12. Plot curve with blending line colors with matplotlib/pyplot
  13. How to reverse a color map image to scalar values?
  14. How to zoomed a portion of image and insert in the same plot in matplotlib
  15. How do you directly overlay a scatter plot on top of a jpg image in matplotlib / Python?
  16. matplotlib: how to draw a rectangle on image
  17. How to render by Vue instead of Jinja
  18. Getting value from select tag using flask
  19. How to generate an html directory list using Python
  20. How do I work with images in Bokeh (Python)
  21. Unable to “import matplotlib.pyplot as plt” in virtualenv
  22. Flask css not updating [closed]
  23. Multiple figures in a single window
  24. 3D Scatter Plot with Images as Annotations
  25. Savefig outputs blank image
  26. python flask display image on a html page [duplicate]
  27. How can I release memory after creating matplotlib figures
  28. Disable the output of matplotlib pyplot
  29. determine matplotlib axis size in pixels
  30. How to add second x-axis at the bottom of the first one in matplotlib.?

Leave a Comment