Mise en image inversée de la vue html Django

Question

Je suis en train de faire jeu échelle serpent & Web sur Django, pour lequel je me sers matplotlib et mpld3 pour créer et afficher mes données de jeu sur la page Web.

Je peux obtenir mon image sur la page Web mais elle est inversée.

Où est-ce que je me trompe dans ce code?

mon fichier views.py:

import matplotlib.image as mpimg 
import mpld3 as mpld3 
import numpy as np 
import matplotlib.pyplot as plt 

def home(request): 
    image = mpimg.imread('platform3.png') 
    figure = plt.figure(dpi=100) 
    subplot = figure.add_subplot(111) 
    subplot.set_xlim(0, 10) 
    subplot.set_ylim(0, 10) 
    subplot.imshow(image, extent=[0, 10, 0, 10]) 
    canvas = FigureCanvas(figure) 
    response = django.http.HttpResponse(content_type='image/png') 
    canvas.print_png(response) 
    html_gen = 'graph.html' 
    with open(html_gen, 'w') as f: 
     f.write(mpld3.fig_to_html(figure)) 
     f.write("Hello") 

    return render(request, html_gen) 

dois-je fournir aussi le fichier généré html_gen.html?

Answer 1

Il suffit de placer le [0, 0] dans le coin inférieur gauche des axes avec:

subplot.imshow(image, extent=[0, 10, 0, 10], origin='lower') 

S'il vous plaît jeter un oeil à la imshow() docs

Mise à jour: Comment vérifier et définir une valeur par défaut image.origin valeur

1. Vérifiez:

   >>> import matplotlib as mpl 
   >>> print(mpl.rcParams['image.origin']) 
   upper 
   

2. Set lower comme valeur par défaut (docs):

   $ echo "image.origin : lower" >> .config/matplotlib/matplotlibrc 
   

3. Vérifiez à nouveau:

   >>> import matplotlib as mpl 
   >>> print(mpl.rcParams['image.origin']) 
   upper