Javascript: Temporarily store and display image received from backend as binary data?

Question

I am currently trying to display an image, which I receive from a backend server in a particular way/format, on the screen of the browser.

My problem is acutally closely related to this issue, for which no real answer exists.

Here is a screenshot displaying what the backend server's response looks like:

payload.data contains the data of the image, which is a green cloud (also attached at the end of this post for reference).

My first, probably very stupid, question would be: What kind of format/encoding is that?

Anyway, here is what I then further tried to process the data:

        const blob = new Blob([action.payload.data], { //contains the data
            type: action.payload.headers["content-type"] // 'image/png'
        })
        console.log("blob: ", blob);
        const url = URL.createObjectURL(blob);
        console.log("url : ", url)

As a result, the blob is sucessfully created, as well as the url. However, when I open that link, no image gets displayed.

I am stuck here and would appreaciate any kind of helpful hint pointing out where I am doing a mistake here.

Thanks very much for your support in advance.

PS: As promised, here is the actual png image:

It seems like the data is still in png file format, as in the binary file format. Is the server you're fetching the image from yours? If so, I would recommend to encode the image in base64 and then send it back to the client. — jon doe
– jon doe, Commented Jul 4, 2022 at 9:37
Thank you very much for the quick hint. Let's say, I know the guy on the backend very well. :-) So, I will forward your suggestion to him. — Svennard
– Svennard, Commented Jul 4, 2022 at 9:39

jon doe · Accepted Answer · 2022-07-04 09:43:31Z

1

It seems like your data attribute is still in binary format. You need to convert the hex into base64 in order to display the image. First, if the server you're fetching the image form is yours, I would recommend encoding the image on the server before sending it to the client. If the server is not yours and you can't change the data that is being returned, try something like this:

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

And then use it like this:

const img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');
document.body.appendChild(img);

reference: How to display binary data as image - extjs 4

answered Jul 4, 2022 at 9:43

jon doe

5542 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Svennard Over a year ago

Thank you for providing this reference. For some reason, I am just not able to correctly convert the image data into base64. I tried it the way you suggested (and some variations) without success. Then I also tried using Buffer like so const buff = new Buffer(action.payload.data as string); followed by const b64Data = buff.toString("base64");. But either way, the resulting base64-formatted string always looks different from what I get when I just convert the actual image via the command line using base64 Pictures/cloud.png > base64.txt. Do you have any ideas?

jon doe Over a year ago

And if you compare payload.data to your raw image? Is it the same?

jon doe Over a year ago

@Svennard take a look here - stackoverflow.com/questions/10982712/…

Svennard Over a year ago

Yes, the image data I fetch from the backend server should be fine. I verified that indirectly. Thank for the other reference. This was the variation I have already tried. I am starting to believe that I probably cannot simply use payload.data as an argument in neither btoa() nor Buffer. Maybe I first have to create a blob object from payload.data and then continue with that blob.

Svennard Over a year ago

Alright, the backend server now sends the image data base64-encoded. Now, everything works fine, basically the way you pointed out in your answer (without the hexTo Base64() function, for obvious reasons). Thank you for your input and support, @jondoe

Collectives™ on Stack Overflow

Javascript: Temporarily store and display image received from backend as binary data?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related