如何创建BytesIO img并传递给模板 [英] How to create an BytesIO img and pass to template

问题描述

AIM

我正在尝试：

1. 创建直方图，


2. 将其存储为临时内存，


3. 将图像传递到模板。

我在执行上述第3步时遇到了麻烦。我怀疑我在将上下文数据传递到模板方面犯了一个简单而根本的错误。

错误

HTML呈现的图像标签已损坏。

CODE

Views.py

  class SearchResultsView（DetailView）：
 
 ... 
 
 def get（self，request，* args，** kwargs）：
 self.get_histogram（request）
 return super（SearchResultsView，self ）.get（请求，* args，** kwargs）
 
 
 def get_context_data（self，** kwargs）：
 context = super（SearchResultsView，self）.get_context_data（ ** kwargs）
返回上下文
 
 
 def get_histogram（self，request）：
创建和保存Hashtag.locations直方图的功能 
＃创建直方图
 plt.show（）
 img_in_memory = BytesIO（）
 plt.savefig（img_in_memory，format = png）
 image = base64.b64encode（img_in_memory.getvalue（））
 context = {'image'：image} 
返回上下文
  

Results.html

 < img src = data：image / png; base64，{{image}} alt =位置直方图 /> 
  

解决方案

如以下@ruddra所述， get 和 get_context_data ，另一个问题是我必须将base64字符串解码为Unicode串。有关更多信息，请参见

AIM

I am attempting to:

1. Create a histogram,
2. Store it temporary memory,
3. Pass the image to the template.

I am having trouble with Step 3 above. I suspect that I am making a simple and fundamental error in relation to passing the context data to the template.

ERROR

HTML is rendering with a broken image tag.

CODE

Views.py

class SearchResultsView(DetailView):

   ...

   def get(self, request, *args, **kwargs):
        self.get_histogram(request)
        return super(SearchResultsView, self).get(request, *args, **kwargs)


    def get_context_data(self, **kwargs):
        context = super(SearchResultsView, self).get_context_data(**kwargs)
        return context


    def get_histogram(self, request):
        """ Function to create and save histogram of Hashtag.locations """
        # create the histogram
        plt.show()
        img_in_memory = BytesIO()
        plt.savefig(img_in_memory, format="png")
        image = base64.b64encode(img_in_memory.getvalue())
        context = {'image':image}
        return context

Results.html

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

SOLUTION

In addition to issues with get and get_context_data as outlined by @ruddra below, another issue was that I had to decode the base64 string as a Unicode string. For more information, see here.

To do so, I included: image = image.decode('utf8')

So that, views.py looks like this:

def get_histogram(self, request):
    # draw histogram
    plt.show()
    img_in_memory = BytesIO()
    plt.savefig(img_in_memory, format="png") # save the image in memory using BytesIO
    img_in_memory.seek(0) # rewind to beginning of file
    image = base64.b64encode(img_in_memory.getvalue()) # load the bytes in the context as base64
    image = image.decode('utf8')
    return {'image':image}

解决方案

You are calling the get_histogram in wrong way. You can do it like this:

class SearchResultsView(DetailsView):
    ...

    def get_context_data(self, **kwargs):
         context = super(SearchResultsView, self).get_context_data(**kwargs)
         context.update(self.get_histogram(self.request))
         return context

You don't need to call the get_histogram method in get, or override the get method.

Update

I have tried like this:

 class SearchResultsView(DetailsView):
     ...

     def get_histogram(self):
         x = 2
         y = 3
         z = 2
         t= 3    
         plt.plot(x, y)
         plt.plot(z, t)
         plt.show()
         img_in_memory = io.BytesIO()  # for Python 3
         plt.savefig(img_in_memory, format="png")
         image = base64.b64encode(img_in_memory.getvalue())
         return {'image':image}

     def get_context_data(self, *args, **kwargs):
         context = super(SearchResultsView, self).get_context_data(*args, **kwargs)
         context.update(self.get_histogram())
         return context

Output looks like this:

这篇关于如何创建BytesIO img并传递给模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！