我的目標(biāo)是有一個(gè)簡(jiǎn)單的表單，允許用戶輸入一個(gè)函數(shù)來(lái)繪制圖形，以及一個(gè)顯示窗口，一旦用戶點(diǎn)擊提交按鈕，我希望 numpy 和 matplotlib 獲取表單數(shù)據(jù)并生成一個(gè)圖形，然后在新網(wǎng)頁(yè)中顯示該數(shù)字。到目前為止，我按照“創(chuàng)建聯(lián)系表單視圖”來(lái)生成表單并使數(shù)據(jù)可用。我發(fā)現(xiàn)這個(gè)可以讓我顯示圖像。然而，圖像就像這樣占據(jù)了整個(gè)瀏覽器窗口。我希望該圖像顯示在我的網(wǎng)頁(yè)中。我對(duì) Django 很陌生，如果這沒(méi)有意義或信息不夠，我很抱歉。如果需要，我很樂(lè)意提供說(shuō)明或其他信息。這是我的應(yīng)用程序的views.py：from django.shortcuts import renderfrom django.http import HttpResponsefrom matplotlib.backends.backend_agg import FigureCanvasAggfrom .forms import GraphingInputfrom .graphing_tool import graphimport io# Create your views here.def grapher_tool_input(request): submitted = False if request.method == 'POST': form = GraphingInput(request.POST) if form.is_valid(): cd = form.cleaned_data fig = graph(cd['left_end'], cd['right_end'], cd['top'], cd['bottom'], cd['function']) response = HttpResponse(content_type='image/jpg') canvas = FigureCanvasAgg(fig) canvas.print_jpg(response) return response else: form = GraphingInput(initial={'left_end':-10, 'right_end':10, 'bottom':-10, 'top':10}) if 'submitted' in request.GET: submitted = True context ={ 'form': form, 'submitted': submitted, } return render(request, 'gtdefault.html', context)這是我的 forms.pyfrom django import formsclass GraphingInput(forms.Form): left_end = forms.FloatField(max_value=10000000, min_value=-10000000, label='Left End Point') right_end = forms.FloatField(max_value=10000000, min_value=-10000000, label='Right End Point') bottom = forms.FloatField(max_value=10000000, min_value=-10000000, label='Bottom of Window') top = forms.FloatField(max_value=10000000, min_value=-10000000, label='Top of Window') function = forms.CharField(min_length=1, label='f(x)')
2 回答
慕娘9325324
TA貢獻(xiàn)1783條經(jīng)驗(yàn) 獲得超5個(gè)贊
首先，您的views.py 在 POST 的情況下返回圖像。接下來(lái)的部分將告訴瀏覽器您返回的“頁(yè)面”實(shí)際上是一張圖像，并要求瀏覽器顯示該圖像。這就是為什么瀏覽器只顯示圖像。
response = HttpResponse(content_type='image/jpg') canvas = FigureCanvasAgg(fig) canvas.print_jpg(response) return response
因此，在這兩種情況下，您都應(yīng)該返回呈現(xiàn)的模板。return render(request, 'gtdefault.html', context)
我了解您想在網(wǎng)頁(yè)中顯示圖像（gtdefault.html）？這意味著類似這樣的事情。
{% if submitted %}
<img src="you need source here" />
{% else %}現(xiàn)在，棘手的部分是將源 URL 放入上下文中。您可以將生成的圖像上傳到 django meda 文件或某些外部存儲(chǔ)（如 AWS S3）一段時(shí)間，然后使用從那里獲得的 url。
或者您可以按照以下方式傳遞頁(yè)面內(nèi)的圖像：How to display picture from memory in Django?
在第一種方法中，如果圖像稍后會(huì)再次查看，則可以使用瀏覽器緩存。對(duì)于后一種情況，您可以忽略存儲(chǔ)，但實(shí)現(xiàn)起來(lái)“更繁瑣”。
拉風(fēng)的咖菲貓
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
我將views.py中的響應(yīng)更改為render(request, 'gtdefault.html', context)。為了將圖像編碼為base64，我必須遍歷PIL的圖像，然后從PIL的圖像到base64。我還submitted從我的代碼中刪除并改為使用request.method == 'POST'. 再次感謝@Juho Rutila！
我確信可能有一種不那么迂回的方法來(lái)做到這一點(diǎn)，但這是我可以開(kāi)始工作的第一種方法。
我修改后的views.py：
import io
import base64
from PIL import Image
def grapher_tool_input(request):
if request.method == 'POST':
form = GraphingInput(request.POST)
if form.is_valid():
cd = form.cleaned_data
fig = graph(cd['left_end'], cd['right_end'], cd['top'], cd['bottom'], cd['function'])
buf = io.BytesIO()
fig.savefig(buf, format='png')
im = Image.open(buf)
buf2 = io.BytesIO()
im.save(buf2, format='png')
im_str = base64.b64encode(buf2.getvalue()).decode()
data_uri = 'data:image/png;base64,'
data_uri += im_str
context = dict()
context['data'] = data_uri
return render(request, 'gtdefault.html', context)
else:
form = GraphingInput(initial={'left_end':-5, 'right_end':5, 'bottom':-5, 'top':5})
context ={
'form': form,
}
return render(request, 'gtdefault.html', context)
我修改后的gtdefault.html：
{% extends 'base.html' %}
{% block content %}
{% if request.method == 'POST' %}
<img src={{ data }} alt="" height="250" ,width="250">
{% else %}
<form action="" method="post" novalidate>
<table>
{{ form.as_table }}
</table>
<input type="submit" value="Graph">
{% csrf_token %}
</form>
{% endif %}
{% endblock content %}
添加回答
舉報(bào)
0/150
提交
取消