Flask to Numpy Image Conversion

Question

I have been trying to send an image over javascript to a Flask server to draw bounding boxes on coordinates I received from my own API. How might I convert this to a numpy array?

I was thinking of using the cv2.imdecode feature, but I don't want to download that huge file on my server. Here is an example of the input string src i am sending to flask:

data:image/jpeg;base64,IMGDATA HERE

I believe that this string is base64 encoded, but I am not sure how to make this conversion in python.

Answer 1

I have done something similar to this. If you have your url, then you first have to decode the IMGDATA part of the src string, which is base64 encoded. So first you need to separate IMGDATA from the inputstring. This can be done using:

import base64
imgdata = imgsrcstring.split(',')[1]
decoded = base64.b64decode(imgdata)

Then you can use the PIL Libarary to convert the Bytes representation of the string to an image, which can then be converted to a numpy array:

from PIL import Image
from io import BytesIO

img = np.array(Image.open(BytesIO(decoded)))

Answer 2

def upload_file():
   if request.method == 'POST':
        f = request.files['file'].read()
        #    print(f)
        npimg = np.fromstring(f,np.uint8)
        img = cv2.imdecode(npimg,cv2.IMREAD_COLOR)
        img = Image.fromarray(img.astype("uint8"))
        #do anything with image here
        rawBytes = io.BytesIO()
        img.save(rawBytes, "JPEG")
        rawBytes.seek(0)
        img_base64 = base64.b64encode(rawBytes.getvalue()).decode('ascii')
        mime = "image/jpeg"
        uri = "data:%s;base64,%s"%(mime, img_base64)
        return render_template("./template/output.html",image=uri)

this will read image from the javascript code and after you have performed operations will return image which can be passed in HTML page given you assign placeholder for the image on the page.