フラスコディスプレイのmatplotlibのをPNGプロットを生データをプロット

Question

次のコードスニペットは、matplotlibのプロットを生成およびPNG返し：

HTMLでこれを埋め込み

@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') 

：予想通り

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

作品。 しかし、jqueryの使用イメージを更新しようとすると：

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

ディスプレイRAWデータとして画像

Answer 1

それはbase64エンコーディングが必要であったことが判明：

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