Flask return image object

Question

I have a React Native project where I send a photo to my Flask backend to do some image processing, then return the processed image back to React Native (using a POST request for this entire process).

I am able receive the image into my Flask app, and am able to run the processing, however, I cannot figure out how to send the image back to React Native. So far I have tried everything without storing the image anywhere but I'm starting to wonder if I should create a temporary image file in flask (what would be the pros and cons)?

Here is what I have so far:

app.py (Flask)

@app.route('/analyze-img', methods=['POST'])
def analyze_img():
    # read image file
    filestr = request.files['FrontProfile'].read()
    npimg = np.frombuffer(filestr, dtype=np.uint8)
    img = cv.imdecode(npimg, cv.IMREAD_UNCHANGED)

    # process image
    img_annotated = process_img(img)

    # return output image
    retval, buffer = cv.imencode('.jpg', img_annotated)
    response = make_response(buffer.tobytes())
    return response

However, this returns undefined in the response for some reason (I have check the data going into Flask is fine):

const photo = { uri: frontProfile, type: "image/jpeg", name: "photo.jpg" };
var form = new FormData();
form.append("FrontProfile", photo);

await fetch("http://<my IP>:5000/analyze-img", {
  method: "POST",
  body: form,
})
  .then((resp) => resp.json())
  .then((json) => console.log(json))
  .catch((err) => console.error(err));

which returns JSON Parse error: Unexpected identifier "undefined" Would appreciate any help!

Answer 1

The issue seems to be in: response = make_response(buffer.tobytes()) line. As per the make_response documentation,

make_response(rv) Convert the return value from a view function to an instance of response_class.

Parameters rv –

the return value from the view function. The view function must return a response. Returning None, or the view ending without returning, is not allowed. The following types are allowed for view_rv:

str (unicode in Python 2) A response object is created with the string encoded to UTF-8 as the body.

bytes (str in Python 2) A response object is created with the bytes as the body.

dict A dictionary that will be jsonify’d before being returned.

Since you are passing the byte object to this method, the make_response is not implicitly converting to a JSON format, which you are expecting on the client side. This can be fixed by using: response = make_response({"payload": buffer.tobytes()}, 200)