matplotlib 如何在django模板中显示保存的动态创建的图像?

xzabzqsa  于 2023-10-24  发布在  Go
关注(0)|答案(3)|浏览(127)

我已经在视图中创建了一个绘图,并将绘图保存为templates文件夹中的png。但是当我尝试使用模板html文件中的<img>标记显示此保存的图像时,图像不会显示。下面是我的文件夹结构的图像:Folder Structure
这是我在视图中保存绘图的方式:

def result(request):
    if request.POST and request.FILES:
        mycsv=pd.read_csv(request.FILES['csv_file'])
        c=mycsv.X
        #We divide by the class height(basically) so that Xi+1-Xi=1
        x = [d / 5 for d in c]
        n=len(x)
        b=mycsv.Y
        divi=np.sum(b)
        f = [e / divi for e in b] 
        #Thus sum(f)=1, makes calculation of mean simpler

        #PLOTTING BEGINS
        fig = plt.figure()
        ax = plt.subplot(111)
        ax.plot(x, f)
        plt.title('Pearson Type 1 ')
        ax.legend()
        #plt.show()
        fig.savefig('polls/templates/polls/plot.png')
        context = {'n':n,}
        return render(request, 'polls/result.html', context)
    else:
        return HttpResponse("Form Not Submitted")

我尝试获取图像的result.html文件是:

<h1>Graph with {{n}} points</h1>
<img src='./plot.png' />

我在我的本地主机上运行这个,权限有问题吗?
我刚开始学习Django,想测试一下这个东西。谢谢你的帮助!

6xfqseft

6xfqseft1#

你的方法有很多地方是错误的,但我会给你给予一些建议,告诉你如何继续下去,尽管你可能想重新考虑一下。
首先,将文件保存到templates目录不会使其对模板可用。templates目录是一个特殊的配置,允许您使用Django的模板加载器,它不会加载像您的图像这样的静态文件。
您可以将图像保存到静态文件中,然后使用{% static %}模板标记来恢复它,但是,同样,这将是错误的方法,因为您的图像不是静态内容,它是动态创建的。
由于在创建映像后,您对其中的数据没有任何用处,因此我的建议是使用TempFile将映像存储在临时文件中,或者(如果足够轻的话)使用StringIO将映像存储在内存中,然后将这些字节作为base64加载到上下文中

from StringIO import StringIO
import base64

img_in_memory = StringIO()
fig.savefig(img_in_memory, format="png") #dunno if your library can do that.
context['image'] = base64.b64encode(img_in_memory.getvalue())

然后,在你的模板中,你会做这样的事情:

<img src="data:image/png;base64,{{image}}" />
yyhrrdl8

yyhrrdl82#

或者简单地将图像转换为字符串,

with open(original_image_path, "rb") as img_file:
    base64_img = base64.b64encode(img_file.read()).decode('utf-8')
    mimetype = mimetypes.guess_type(original_image_path)[0]

一旦完成,将此变量在HTML上呈现为

<img src="data:{{ mimetype }};base64,{{ base64_img }}"/>

它将同时处理JPEG和PNG。

knsnq2tg

knsnq2tg3#

我在生成动态图时遇到了这样的问题,我只是使用了这种格式。
如果图像是以特定的文件名静态保存的,并且每次都不会动态重新生成,那么使用静态标记渲染它将无法正常工作。在这种情况下,您应该直接使用图像的URL路径,而不使用静态标记。
以下是如何更新HTML模板中的标记:
我以前用过这个格式:

<img src="{% static 'images/female_graph_'|add:request.user.id|stringformat:".png" %}" alt="Female Spouse Graph">

渲染存储在静态文件中的动态图像的正确方法:

<img src="/static/images/female_graph_{{ request.user.id }}.png" alt=" Female Spouse Graph">

确保您在img src之前正确使用了HTML标记<>。打开并关闭图像标记。
如果需要,请将/static/替换为指向静态文件的相应URL路径。这样,浏览器将直接从正确的URL请求图像,而不会涉及静态标记,并且它应该正确呈现。

相关问题