How to send an image directly from flask server to html?

Question

I am new to flask and am trying to make an app such an image is taken by the html and js from the webcam and then it is sent to the server with ajax request. I got this part. Then some processing is done on the image and it has to be sent back to the frontend. I know how to send data normally in flask, as in

@app.route('/')
def function():
    return render_template("index.html", data = data)

But in python images are in form of numpy arrays and js cannot read numpy arrays and convert it to images( atleast I don't know of any way to do that). so what is the way this can be done?

Answer 1

This shows how to convert numpy array to PIL.Image and then use it with io.BytesIO to create file PNG in memory.

And then you can use send_file() to send PNG to client.

from flask import Flask, send_file
from PIL import Image
import numpy as np
import io

app = Flask(__name__)

raw_data = [
    [[255,255,255],[0,0,0],[255,255,255]],
    [[0,0,1],[255,255,255],[0,0,0]],
    [[255,255,255],[0,0,0],[255,255,255]],
]

@app.route('/image.png')
def image():
    # my numpy array 
    arr = np.array(raw_data)

    # convert numpy array to PIL Image
    img = Image.fromarray(arr.astype('uint8'))

    # create file-object in memory
    file_object = io.BytesIO()

    # write PNG in file-object
    img.save(file_object, 'PNG')

    # move to beginning of file so `send_file()` it will read from start    
    file_object.seek(0)

    return send_file(file_object, mimetype='image/PNG')


app.run()

The same way you can send it as GIF or JPG.