在 Django home 中添加动态生成的 matplotlib 图片

Question

我想在家里添加一张动态生成的图片。我不想保存这个图，而是直接在我的主页上显示它，在一些文本之后。 我的views.py 看起来像：

from django.shortcuts import render
def index(request):
    import random
    import datetime
    import django
    import pylab 
    import PIL, PIL.Image
    import io

    from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
    from matplotlib.figure import Figure
    from matplotlib.dates import DateFormatter

    fig=Figure()
    ax=fig.add_subplot(111)
    x=[]
    y=[]
    now=datetime.datetime.now()
    delta=datetime.timedelta(days=1)
    for i in range(10):
        x.append(now)
        now+=delta
        y.append(random.randint(0, 1000))

    ax.plot_date(x, y, '-')
    ax.xaxis.set_major_formatter(DateFormatter('%Y-%m-%d'))
    fig.autofmt_xdate()
    canvas = FigureCanvas(fig)
    graphic1  =django.http.HttpResponse(content_type='image/png')
    canvas.print_png(graphic1)
    return render(request, 'personal/home.html',{'graphic':graphic1}) 

函数index 已包含在urls.py 中。那里没问题。我的home.html 看起来像

{% extends "personal/header.html" %}
{% block content %}
<p> Welcome to my website!</p>
{% include "personal/includes/htmlpic.html" %}
{% endblock %}  

我的htmlpic.html 是：

{% block graphic  %}
<div id="content">
    <img src= "data:image/png;base64,{{graphic|safe}}" >
</div>
{% endblock %}

错误：该图未显示。这是一个像这样的断开链接：

<img src="data:image/png;base64,&lt;HttpResponse status_code=200, " image png">

它清楚地复制了状态而不是二进制图像（并添加了额外的引号）。你能告诉我我在这里做错了什么吗？或者建议一个类似的问答？

PS。我是 Django 的新手，请多多包涵。

Answer 1

根据我的经验，using data URIs is usually a bad idea。

在这种情况下，无论如何都不需要它们。只需创建一个返回图像的单独视图。为了简单起见，我在这里使用gnuplot。该命令只是将正弦函数的 png 图像打印到标准输出。 （Here 是一些关于从 matplotlib 画布获取图像数据的说明。）在views.py：

def my_plot(request):
    import subprocess
    plot = subprocess.check_output(['gnuplot', '-e', 'set terminal pngcairo; plot sin(x)'])
    response = HttpResponse(plot, content_type="image/png")
    return response

假设您将此视图映射到 url plot，因此在此处编写 urls.py：

urlpatterns = patterns(
    '',

    url(r'^$', views.index, name='home'),

    url(r'^plot$', views.my_plot, name='plot')
)

然后您可以简单地使用生成图像的视图作为图像的来源。在htmlpic.html：

<img src="plot"></img>

对我来说，这是一个更清晰的关注点分离。一个视图呈现您的模板，另一个呈现图像。如果您希望将此图像嵌入程序中的其他位置，这种方式允许您这样做而无需重复自己。