In the django web project, how to translate BytesIO object to image url? How to convert the file stream(image) to the original image file?

Question

First, My Situation description is below:

I am developing a Django app demo. The demo can receive an image file from the user. Then my Django app will processing this image, like add some text or change the image size.

I am a newbie in Django, file stream and response. I try to do some search and research. But I can not find a suitable case. Maybe I did not describe my question by the accurate and appropriate keywords.

I don't want to save the processed image to the local disk first, and then get the file's local path back to Django web. I want to return the image directly to the browser in memory.

Incidentally, django does not seem to recommend reading the media files directly on the local disk. Both css and js need to be configured with static_path to work properly. In addition, according to my investigation, it seems that handling and returning files directly in memory is a more mainstream practice. Of course, I have just come into contact with this field. It may not be the case. I just want to introduce ideas to help describe this tricky problem.

My mistake is this: Now my django app can get the user's image and process it smoothly. I also find a cool way to convert the 'PIL Image object' to a 'BytesIO object'. Thanks to Stackoverflow. I found the way about BytesIO on Stackoverflow.

And the next step is, I want to return this processed image. NOW, The last status of the image is a 'BytesIO object'.

The code like these:

# Python CODE

# above is processing with PIL
# the image is the Image object

image = Image.composite(image, bg, image)


# below is my new code
# I wrote the on the head: import Bytes IO

byte_file = BytesIO()
image.save(byte_file, format='PNG')
image_data = byte_file.getvalue()
return image_data

And the html demo is:

<!-- HTML CODE -->    
<div>
    <img src='{{ image_data }}' />
</div>

And I see the result in Browser is:

<!-- Chrome developer tools watch the source code -->  
<img src="b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\ ... ... />

I know there is only one small step left and I will be able to display the image. However, I just can't find the right way. Last night, I was depressed.I guess that a few lines of code can handle it. However, I was trapped in this because I was not familiar with the file flow.

I try the SECOND way:

# Python CODe
image_data = byte_file.getvalue()
return HttpResponse(image_data,content_type="image/png")

The html source is:

<img src="&lt;HttpResponse status_code=200, &quot;image/png&quot;&gt;">

SECOND way: html source in Chrome dev tools

I felt Excited! But I can not display the image. I am sad.

How can I convert BytesIO type image data to url and display it in html page? Expected effect

score 6 · Answer 1 · answered Mar 27 '18 at 08:00

Rather than trying to render the binary image data using a template, why not just serve it directly on a dedicated URL? You'd need to separate the view that renders the template and the view that delivers the image data.

For the view that delivers the image data, it can return a HttpResponse:

def get_image(request):
    ...
    image_data = byte_file.getvalue()
    return HttpResponse(image_data, content_type="image/png")

You'll need to expose that view on an appropriate URL in your urls.py:

url(r'^get_image', get_image)

And then in your template, the src attribute of the image should point at the get_image URL.

<div>
  <img src="/get_image" />
</div>

In the django web project, how to translate BytesIO object to image url? How to convert the file stream(image) to the original image file?

1 Answers1