Sending image from server to client via base64 encoding

Question

I'm facing an issues sending an Image (np.ndarray) over my python server to my javascript client.

Starting with the python server, I process the img like this:

1) Load img as np.ndarray
2) enc_img = base64.b64encode(img.copy(order='C'))
3) utf8_img = enc_img.decode("utf-8")
4) json = {
      ...
      "img": utf8_img,
      ...
   }
5) req_return = json.dumps(json, ensure_ascii=False)

// The fct below I found on SO.. For the client (javascript) I do the following:

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16))
    }))
}

img_64 = b64EncodeUnicode(jsonRes.fs_dict.face)

var src = "data:image/jpg;base64,";
src += img_64;
var newImage = document.createElement('img');
newImage.src = src;
newImage.width = newImage.height = "100";
document.querySelector('#face_img').innerHTML = newImage.outerHTML;

To sum it up, I want to send an image over the API and convert it into a valid base64 format to display via html. After experimenting a little I sometimes got "no valid base64 format" but with the provided code I'm not getting any error. The image doesn't show up though.

It is important to not save the file in my scenario.

Answer 1

So I figured the problem. I had troubles encoding the image (nparray) to a proper base64 encoding.

pil_img  = Image.fromarray(nparray_img)
buff = BytesIO()
pil_img.save(buff, format="JPEG")

enc_img = base64.b64encode(buff.getvalue()).decode("utf-8")

this resolved the encoding issues for me. I then return a dictionary containing the img like so:

res = {
   "img": enc_img 
}

return res

After converting it to JSON via json.dumps(res) , I send it via the API to my JavaScript Client.

When receiving the JSON, I first parse it to access the dictionary again like so:

jsonRes = JSON.parse(xhr.responseText);
img = jsonRes.img;

and finally output it via HTML by using jQuery:

var source = "data:image/jpg;base64,";
source += img;

$(document).ready(function() {
            $('#face_img').attr('src',source).height(100).width(100).show();
});

The

('#face_img')

is an ID of my HTML, looking like the following:

<img id="face_img" src="" alt="img_face" />

Hope this helps someone.