如何在 HTML/JavaScript 中显示存储为字节数组的图像？

IT技术 javascript html
2021-01-27 13:59:19

我正在用 HTML/JavaScript 编写一个网页。我正在使用 AJAX 从我的后端下载图像。图像表示为原始字节数组，而不是 URL，因此我无法使用标准<img src="{url}">方法。

如何向用户显示提到的图像？

1个回答

尝试将此 HTML 片段放入您提供的文档中：

<img id="ItemPreview" src="">

然后，在 JavaScript 端，您可以src使用所谓的Data URL动态修改图像的属性。

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

或者，使用 jQuery：

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

这假设您的图像以非常流行的 PNG 格式存储。如果您使用其他一些图像格式（例如 JPEG），请相应地修改URL 中的MIME 类型（"image/..."部分）。

类似问题：

字节格式图片下载。
2021-03-19 13:59:19
<b32ded4a 01000000 708de749 01000000 fa6a1102 01000000 e0e7e549 01000000 f0675d6f 01000000 c051db01 01000000 b23d1b8e 3a050000 00000000 30ea44c4 01000000 00000000 00000000 01000000 306b5d6f 0000>嗨，我得到的数据是这样的格式你能帮如何将它转换成图像数据：视频/ WEBM; Base64格式。它实际上是一个实时视频流。
2021-03-23 13:59:19
我稍微编辑了答案以使其更清楚，但我没有得到一件事，所以我没有真正解决它。为什么这个答案假设图像存储在 base64 字符串中？OP 提到（并且我检查了编辑历史记录）“字节数组”，而不是“base64 字符串”。
2021-03-27 13:59:19
晚会迟到，但如果您的回复看起来像[137,80,78,71,13,10,26,10,0,...]，您可以使用以下行：document.getElementById("ItemPreview").src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...])));
2021-04-02 13:59:19
我的字节 = dwr/download/k1a3JvBCfU3vLji$zKkhQObxzck。src = data:image/png;base64,dwr/download/k1a3JvBCfU3vLji$zKkhQObxzck. 我用过 DWR
2021-04-10 13:59:19
其它你可能感兴趣的问题
上一篇如何将 JSON 对象转换为 JavaScript 数组？ 下一篇如何使用 JavaScript 暂停和恢复 CSS3 动画？