Display image from a string of bytes

Question

I received the bytes of the image from a server which passes the bytes through websockets. The received message looks like this:

b'\xff\xd8\xff\xe0\x00\x10JFIF\x00\x01\x01\x00\x00\x01\x00\x01\x00\x00\xff\xe1\x006Exif\x00\x00II*\x00\x08\x00\x00\x00\x01\x002\x01\x02\x00\x14\x00\x00\x00\x1a\x00\x00\x00\x00\x00\x00\x002007:09:12 11:56:03\x00\xff\xdb\x00C\x00\x06\x04\x05\x06\x05\x04\x06\x06\x05\x06\x07\x07\x06\x08\n\x10\n\n\t\t\n\x14\x0e\x0f\x0c\x10\x17\x14\x18\x18\x17\x14\x16\x16\x1a\x1d%\x1f\x1a\x1b#\x1c\x16\x16 , #&\')*)\x19\x1f-0-(0%()(\xff\xdb\x00C\x01\x07\x07\x07\n\x08\n\x13\n\n\x13(\x1a\x16\x1a((((((((((((((((((((((((((((((((((((((((((((((((((\xff\xc2\x00\x11\x08\x01\xe0\x02H\x03\x01"\x00\x02\x11\x01\x03\x11\x01\xff\xc4\x00\x1b\x00\x00\x02\x03\x01\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x04\x05\x02\x03\x06\x01\x00\x07\xff\xc4\x00\x19\x01\x00\x03\x01\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01\x02\x03\x04\x05\xff\xda\x00\x0c\x03\x01\x00\x02\x10\

(This is just a piece of the message, obviously there are too many bytes to share them all here).

This info is stored in a variable called input and I want to display its values in an HTML image which id is "img". I tried the following code:

document.getElementById("img").src=input;

But then I realized that as I said earlier, input is a string.

Is there a way to display the image from the data I stored in input? Thank you in advance.

Lumito · Accepted Answer · 2020-06-18 16:39:05Z

2

Did you ever tried this one?

document.getElementById("img").src = "data:image/png;base64," + input;

edited Jun 18, 2020 at 16:39

Lumito

5206 silver badges24 bronze badges

answered Jun 18, 2020 at 16:24

Ultimate

769 bronze badges

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

6 Comments

Ultimate Over a year ago

Can you send me the exact byte array from the server?

Asriel Over a year ago

it never takes the form of a byte array, the server (written in python) takes the data from a sql database in the form of a blob (so it's stored as a b string) and then it sends that data through the websockets to the javascript client.

Ultimate Over a year ago

Your message is comes as hex array, and you need to convert it to the bytearray

Asriel Over a year ago

is there a way to do that? I've tried some methods I found here and there, but they didn't work for me.

Asriel Over a year ago

What do you want to see? If you want me to share the complete hex then I can't, it's too long and it won't let me share it.

|

Collectives™ on Stack Overflow

Display image from a string of bytes

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related