Plotting png plot from matplotlib in flask displays raw data

Question

The following snippet of code generates a matplotlib plot and returns a png:

@app.route('/plot/')    
def test_image():
        fig, ax = plt.subplots(1)
        plt.plot(np.arange(100), np.random.normal(0, 1, 100))
        canvas = FigureCanvas(fig)
        img = BytesIO()
        fig.savefig(img)
        img.seek(0)
        return send_file(img, mimetype='image/png')

Embedding this in html:

<img src="{{ url_for('test_image') }}" alt="Image Placeholder" height="300">

works as expected. However, when trying to update the image using jquery:

$.get('/plot', function(image){
          $("#weapImage").html('<img src="data:image/png;base64,'+image+'" />')
      })

displays the image as raw data

Little Bobby Tables · Accepted Answer · 2018-09-27 09:43:10Z

1

It turns out that base64 encoding was necessary:

    fig, ax = plt.subplots(1)
    plt.plot(np.arange(100), np.random.normal(0, 1, 100))
    img = BytesIO()
    fig.savefig(img)
    img.seek(0)
    resp = Response(response=base64.b64encode(img.getvalue()),
                    status=200, mimetype="image/png")
    return resp

edited Sep 27, 2018 at 9:43

Little Bobby Tables

4,8246 gold badges34 silver badges51 bronze badges

answered Apr 10, 2017 at 10:33

kostas

2,0191 gold badge27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Plotting png plot from matplotlib in flask displays raw data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related