Javascript：临时存储和显示从后端接收到的图像作为二进制数据？

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:

Answer 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