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.

By *b64encod*ing you lost image size information, at the other end you'll only have a stream of bytes, that you need to interpret (I see that you're setting them to 100). But check [\[SO\]: How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) or [\[SO\]: How to create a Minimal, Reproducible Example (reprex (mcve))](https://stackoverflow.com/help/minimal-reproducible-example) for more asking related details. Also, [\[JonSkeet.CodeBlog\]: WRITING THE PERFECT QUESTION](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question) might be a good point to start. — CristiFati, Aug 24 '22 at 10:57
Does this answer your question? [Encoding an image file with base64](https://stackoverflow.com/questions/3715493/encoding-an-image-file-with-base64) — tituszban, Aug 24 '22 at 11:03

score 0 · Accepted Answer · answered Aug 25 '22 at 09:42

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.

Sending image from server to client via base64 encoding

1 Answers1