matplotlib embed figures in auto generated html [duplicate]

Question

I want to embed a figure generated by python matplotlib into a html file with other content. Is that possible?

What I have thought is saving figures as png file and then use <img> tag to refer to it.

Some code I was trying to use are like:

import matplotlib.pyplot as plt fig = plt.figure() #plot sth plt.savefig('test.png')  html = 'Some html head' + '<img src=\'test.png\'>' + 'Some more html'  with open('test.html','w') as f:     f.write(html) 

However, this will generate two files instead of one and I don't have a server to host the png file. Is that possible to embed the figure in the html? How do I do it in python.

Thank you.

Answer 1

You can write the image into a temporary file and encode it with base64 and then embed the encoded base64 image into your html. Most modern browsers will correctly render the image.

A short example modified from your code will be:

import matplotlib.pyplot as plt import base64 from io import BytesIO  fig = plt.figure() #plot sth  tmpfile = BytesIO() fig.savefig(tmpfile, format='png') encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')  html = 'Some html head' + '<img src=\'data:image/png;base64,{}\'>'.format(encoded) + 'Some more html'  with open('test.html','w') as f:     f.write(html) 

Answer 2

You can convert the image using base64 encoding: https://docs.python.org/3/library/base64.html#base64.encodebytes

and then embed the encoded string in the html like so: How to display Base64 images in HTML?