0

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:

enter image description here

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: enter image description here

Svennard
  • 71
  • 1
  • 8
  • 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 Jul 04 '22 at 09: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 Jul 04 '22 at 09:39

1 Answers1

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

jon doe
  • 460
  • 1
  • 7
  • 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? – Svennard Jul 04 '22 at 12:52
  • And if you compare `payload.data` to your raw image? Is it the same? – jon doe Jul 04 '22 at 13:03
  • @Svennard take a look here - https://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript – jon doe Jul 04 '22 at 13:04
  • 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 Jul 04 '22 at 13:40
  • 1
    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 – Svennard Jul 05 '22 at 06:03