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

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

如何向用户显示上述图像？

javascript html

— cubuspl42
source

使用JavaScript将字节数组显示为图像的

— Suresh Atta 2013年

OutputStream o = resp.getOutputStream（）; o.write（imageInBytes）;

我怕问，但是好奇心赢了。

— cubuspl42

我认为这个问题不是题外话。

— metasoarous

136

尝试将此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/..."部分）。

类似问题：

— 斯里达河
source

我的字节= dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck。src = data：image / png; base64，dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck。我使用了DWR

字节格式图像下载。

— 钻石王

聚会晚了，但是如果您的回复像[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,...])));

— Joel'

我对答案进行了一些编辑以使其更清晰，但我没有得到一件事，所以我并没有真正解决它。为什么此答案假定图像存储在base64字符串中？OP提到（我检查了编辑历史记录）“字节数组”，而不是“ base64字符串”。

— cubuspl42

@ Joel'-'对我

— 有用