Render image without saving

Question

I want to get an image from user, work with it at beckend and render result back to user. Is it possible to do without saving image on disk?

my view:

class InputImageForm(forms.Form):
    image = forms.ImageField()


def get_image(request):
    if request.method == 'POST':
        form = InputImageForm(request.POST, request.FILES)
        if form.is_valid():
            image = request.FILES['image']
            #some actions with image
            return render_to_response('results.html', {'image': image})
        else:
           form = InputImageForm()
    else:
        raise Http404

In template, tag {{ image }} returns a name of file.

I don't think it is possible if you want to show it to the user it need to be somewhere. You may save the file temporary save it via an imagehosting api and delete the current image in your server for example. to render the image of template img src="{{image.url}}" — Tony, Jun 14 '14 at 11:33

score 6 · Accepted Answer · edited Jun 14 '14 at 14:17

6

The problem is that returning a page to the user would normally involve two requests: one for the HTML page, and one for the image itself as referenced by an img tag in that HTML. But as you say, without storing it anywhere in the meantime, the image would be lost.

There is an alternative: you can use a data uri to include the actual data for the image inline in the html. That means you won't have to persist it across requests, as everything will be returned at one. Data uris are supported in most browsers, including ie8+.

You can format the data like this, for example:

from base64 import b64encode

encoded = b64encode(img_data)
mime = "image/jpeg"
uri = "data:%s;base64,%s" % (mime, encoded)

And use it directly in the template:

<img src="{{ uri }}">

edited Jun 14 '14 at 14:17

Ian Stapleton Cordasco

26,944
4
67
72

answered Jun 14 '14 at 12:38

Daniel Roseman

588,541
66
880
895

1

Nice solution! But I got "must be convertible to a buffer, not InMemoryUploadedFile" error, can you help with it, please?) – Harkonnen Jun 14 '14 at 13:21
@Harkonnen You need to set `img_data = form.cleaned_data['image'].file.read()`. – stefanbschneider Jan 15 '21 at 21:09
1

The solution doesn't work for me. It just shows the broken image logo, even though I followed the steps exactly. Ok, got it: I had to add `encoded = encoded.decode('ascii')`` – stefanbschneider Jan 15 '21 at 21:11

score 3 · Answer 2 · answered Jun 14 '14 at 12:35

If your form is Model Form .then jus try the below code.

from django.core.files import File
from django.core.files.temp import NamedTemporaryFile

class InputImageForm(forms.Form):
    image = forms.ImageField()
    class Meta:
       model = YourModel



def get_image(request):
    if request.method == 'POST':
        form = InputImageForm(request.POST, request.FILES)
        if form.is_valid():
            image = request.FILES['image']
            save_image_from_url(form,image)

        else:
           form = InputImageForm()
    else:
        raise Http404



def save_image_from_url(model, img):
    r = request.FILES['image']

    img_temp = NamedTemporaryFile(delete=True)
    img_temp.write(r.content)
    img_temp.flush()

    i = model.image.save("image.jpg", File(img_temp), save=True)
    return HttpResponse(i.read(), mimetype="YOUR MIME TYPE")

score 3 · Answer 3 · answered Jan 21 '21 at 17:24

This answer is inspired by @Daniel Roseman answer

write the image to BytesIO()

from PIL import Image  
img = Image.open("image.jpg") 
data = io.BytesIO()
img.save(data, "JPEG") # just an example, load the image into BytesIO any way you like.

encode img into base64

encoded_img = base64.b64encode(data.getvalue())

decode img in context, as well as setting content_type

decoded_img = encoded_img.decode('utf-8')
img_data = f"data:image/jpeg;base64,{decoded_img}"

render your template

return render(request, "index.html", img_data=img_data)

in your HTML template

<img src="{{ img_data }}" >

you can check also https://buraksenol.medium.com/pass-images-to-html-without-saving-them-as-files-using-python-flask-b055f29908a

Render image without saving

3 Answers3

Linked