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?

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?

• javascript
• python
• flask

• flask has function send_file() and maybe it can works with data from pillow - because you have to send data pressed in format png or jpg, not raw data from numpy. Or maybe it can run with io.BytesIO which can create file object in memory – furas Commented Jul 9, 2019 at 7:13
• @furas I don't want to save the processed image though. – Shantanu Shinde Commented Jul 9, 2019 at 7:15
• browser can't display numpy data. It needs PNG/JPG. You can use PIL/pillow to convert numpy array to object PIL.Image which has function to save it as JPNG/PNG in file. But instead of real file on disk you can use file created in memory using io.ByteIO. – furas Commented Jul 9, 2019 at 7:25
• @furas if I save the image in memory with io.BytesIO, how do I access the image in HTML? what will be its path? – Shantanu Shinde Commented Jul 9, 2019 at 7:39

1 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.