matplotlib embed figures in auto generated html

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.

What about use a base64 image? https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html — Haochen Wu, Feb 10 '18 at 06:22
Outlook IOS client does not show image which is base64 encoded in the html format email. Is there any workaround? — Edmund, Apr 26 '20 at 01:26

score 53 · Accepted Answer · edited Nov 10 '19 at 22:22

53

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)

edited Nov 10 '19 at 22:22

hobs

18,473
10
83
106

answered Feb 10 '18 at 06:32

Haochen Wu

1,753
1
17
24

5

This worked for me, but I found I had to do one additional step of decoding the `encoded`. `"".format(encoded.decode("utf-8"))` – Sean Chon Aug 06 '19 at 16:52
3

I solved my problem by using `encoded = base64.b64encode(tmpfile.getvalue()).decode('utf8')` `` – Hua Jia Aug 25 '19 at 17:34
Awesome answer! – Barney Szabolcs May 23 '21 at 15:02
Where is the image data in this – Amarnath Reddy Surapureddy Nov 03 '22 at 11:33
How to Convert matrix data into image inside HTML or else how to embedded matrix data as image in HTML – Amarnath Reddy Surapureddy Nov 03 '22 at 11:35

score 4 · Answer 2 · answered Feb 10 '18 at 06:27

4

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?

answered Feb 10 '18 at 06:27

PaW

659
4
7

matplotlib embed figures in auto generated html

2 Answers2

Linked