matplotlib incrustar figuras en html generado automáticamente [duplicate]

2 minutos de lectura

Quiero incrustar una figura generada por python matplotlib en un archivo html con otro contenido. ¿Es eso posible?

Lo que he pensado es guardar figuras como archivo png y luego usar <img> etiqueta para referirse a ella.

Algunos códigos que estaba tratando de usar son como:

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)

Sin embargo, esto generará dos archivos en lugar de uno y no tengo un servidor para alojar el archivo png. ¿Es posible incrustar la figura en el html? Como lo hago en python.

Gracias.

  • ¿Qué hay de usar una imagen base64? stackoverflow.com/questions/8499633/…

    –Haochen Wu

    10 de febrero de 2018 a las 6:22

  • El cliente Outlook IOS no muestra una imagen codificada en base64 en el correo electrónico en formato html. ¿Hay algún trabajo alrededor?

    – Edmundo

    26 de abril de 2020 a las 1:26

Avatar de usuario de Haochen Wu
Haochen-Wu

Puede escribir la imagen en un archivo temporal y codificarla con base64 y luego incrustar la imagen codificada en base64 en su html. La mayoría de los navegadores modernos renderizarán correctamente la imagen.

Un breve ejemplo modificado de su código será:

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)

  • Esto funcionó para mí, pero descubrí que tenía que hacer un paso adicional para decodificar el encoded. "<img src='data:image/png;base64,{}'>".format(encoded.decode("utf-8"))

    – Sean Chon

    6 de agosto de 2019 a las 16:52


  • Resolví mi problema usando encoded = base64.b64encode(tmpfile.getvalue()).decode('utf8') <img src='data:image/png;base64,{{}}'>

    – Hua Jia

    25 de agosto de 2019 a las 17:34

  • ¡Respuesta impresionante! 🙏🙏🙏🤓😎

    – Barney Szabolcs

    23 mayo 2021 a las 15:02

  • ¿Dónde están los datos de la imagen en este

    – Amarnath Reddy Surapureddy

    3 de noviembre de 2022 a las 11:33


  • Cómo convertir datos de matriz en imagen dentro de HTML o cómo incrustar datos de matriz como imagen en HTML

    – Amarnath Reddy Surapureddy

    3 de noviembre de 2022 a las 11:35

Puede convertir la imagen usando la codificación base64:
https://docs.python.org/3/library/base64.html#base64.encodebytes

y luego incruste la cadena codificada en el html de esta manera: ¿Cómo mostrar imágenes Base64 en HTML?

¿Ha sido útil esta solución?