在图像中显示二进制图像数据

Question

我不知道如何在html图像中显示从Web api返回的图像字节。这就是数据在firefox控制台中的显示方式（为简洁起见，被截短）：

������JFIF�������������C����������������������...

我尝试将data:image/jpeg;base64, " + btoa(data)用作图像src，但出现String contains an invalid character错误。当我使用btoa(unescape(encodeURIComponent(data)))而不是btoa时，没有出现任何错误，但是图像不显示。响应的Content-Type为image/jpeg。

在Fiddler中正确渲染图像。

有什么想法如何获取图像以显示数据？

Answer 1

我已经开始工作了。问题是我使用了jQuery $.ajax来获取图像数据。 jQuery会自动将接收到的字节转换为UTF-16字符串，并将该字符串传递到success回调中。

如果我使用基本的XMLHttpRequest，就可以用html格式渲染接收到的图像，如下所示：

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "arraybuffer";
xhr.setRequestHeader("Content-Type", "application/json");    
xhr.onload = function() {
  var byteArray = new Uint8Array(xhr.response);
  var base64Data = btoa(String.fromCharCode.apply(null, byteArray));
  image.attr("src", "data:image/jpeg;base64, " + base64Data);
};
xhr.send(jsonPayload);