python - b64decode - Convertir matplotlib png a base64 para ver en la plantilla html

base64 to bytes python

Question

Fondo

Hola, estoy tratando de hacer una aplicación web simple, siguiendo un tutorial, que calcula una ecuación de vibración amortiguada y devuelve un png del resultado a la página html después de que se haya convertido en una cadena Base64.

Problema

La aplicación funciona normalmente, excepto que cuando se calcula el resultado, se devuelve un icono de imagen roto, probablemente porque la cadena Base64 no es válida.

Solución de problemas

He convertido otra imagen png en una cadena Base64 usando un convertidor en línea y usé <img src="data:image/png;base64, BASE64_STRING"/> para mostrar la imagen correctamente. Creo que la plantilla está formateada adecuadamente. También he leído otras respuestas de SO here y here y he intentado implementarlas sin éxito.

Código relevante

Aquí es donde se devuelve la cadena de imagen

from numpy import exp, cos, linspace
import matplotlib.pyplot as plt


def damped_vibrations(t, A, b, w):
    return A*exp(-b*t)*cos(w*t)


def compute(A, b, w, T, resolution=500):
    """Return filename of plot of the damped_vibration function."""
    t = linspace(0, T, resolution+1)
    u = damped_vibrations(t, A, b, w)
    plt.figure()  # needed to avoid adding curves in plot
    plt.plot(t, u)
    plt.title(''A=%g, b=%g, w=%g'' % (A, b, w))

    from io import BytesIO
    figfile = BytesIO()
    plt.savefig(figfile, format=''png'')
    figfile.seek(0)  # rewind to beginning of file
    import base64
    #figdata_png = base64.b64encode(figfile.read())
    figdata_png = base64.b64encode(figfile.getvalue())
    return figdata_png

Aquí es donde se muestra la imagen.

{% if result != None %}
<img src="data:image/png;base64,{{ result }}"/>
{% endif %}

Si es necesario, puedo proporcionar el archivo del controlador también. ¡Gracias por cualquier ayuda!

Answer 1

El comienzo de los datos en la plantilla da una pista de lo que está sucediendo. ' es la entidad HTML para una sola cita '' . Combinado con el anterior b, b'' , se parece a la representación de una cadena de bytes, en lugar del contenido de la cadena.

Decodifique la cadena de bytes en una cadena antes de intentar renderizarlos con Jinja.

render_template(''result.html'', result=figdata_png.decode(''utf8''))

Jinja representa la representación de cadena de objetos en {{ }} . La representación de cadena de una cadena de bytes incluye la b'''' para distinguirla de una cadena de Unicode. Así que tienes que decodificar para mostrar su valor directamente.

Answer 2

Intente agregar la sección meta charset = "utf-8" en la sección HEAD de su plantilla. Eso me funcionó :-)