从一串字节中显示图像

Question

我从通过 websockets 传递字节的服务器接收到图像的字节。收到的消息如下所示：

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\

（这只是消息的一部分，显然字节数太多，无法在这里全部分享）。

此信息存储在名为 input 的变量中，我想在 ID 为 "img" 的 HTML 图像中显示其值。我尝试了以下代码：

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

但后来我意识到，正如我之前所说，input是一个字符串。

有没有办法显示我存储在 input 中的数据的图像？提前谢谢你。

Answer 1

你试过这个吗？

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

从一串字节中显示图像

Display image from a string of bytes

javascript

image

innerhtml

data-conversion