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.
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)
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?