从Django HTML视图获取反转图像

Question

I am trying to make web-based snake&ladder game on Django , for which I am using matplotlib and mpld3 to create and display my game data on web page.

I am able to get my image on the web page but it is inverted.

Where am I going wrong in this code?

my views.py file:

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)

should I provide the generated html_gen.html file too?

Answer 1

Just place the [0, 0] in the lower left corner of the axes with:

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

Please have a look at the imshow() docs

Update: How to check and set a default image.origin value

1. Check:

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

2. Set lower as a default value ( docs ):

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

3. Check again:

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