无法在网页上显示存储在 Azure Blob 存储中的二进制文件答案

【问题标题】：Trouble displaying binary stored in Azure Blob Storage on webpage无法在网页上显示存储在 Azure Blob 存储中的二进制文件
【发布时间】：2014-01-21 17:22:31
【问题描述】：

使用 Windows Azure 存储服务，我创建了一个容器，随后使用 PUT Rest API 创建了一个 BlockBlob（JPEG 图像）。我可以登录我的 Azure 门户并下载图像。

当我调用 GET API 时，Azure 成功地返回了响应正文中的 blob - 我认为它与我上传的原始二进制文件相同。

当我调用 GET API 时，我是通过我的 JavaScript (Sencha Touch) 应用程序中的 XHR 请求来执行此操作的。我可以看到响应（原始二进制文件），但我不知道如何将二进制文件读入我可以显示的图像。

我尝试了以下方法：

rawBinary = response.responseText;
encodedBinary = btoa(unescape(encodeURIComponent(rawBinary)));
img.setSrc('data:' + file.type + ';base64,' + encodedBinary);

...这给了我这样的东西：

data:image/jpeg;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAO+/vWkABAAAAAEAAAAmAAAAAAAD77+9AQADAAAAAQABAADvv70CAAQAAAABAAAKIO+/vQMABAAAAAEAAAfvv70AAAAA77.......

这会正确地将 DIV 上的背景 URL 设置为 base64 编码图像...但没有显示。它看起来 像一个有效的 base64 字符串，并且我的控制台或网络选项卡中没有错误。但什么都没有显示。

谁能帮忙？

编辑：以下是 XHR 响应正文中的“二进制”响应：

����JFIF��XExifMM*�i&��
����C   ��C��� "��  
���}!1AQa"q2���#B��R��$3br� 

...etc... VERY long response of unreadable characters

【问题讨论】：

您的 div 和/或 img 是否指定了高度/宽度？
是的，我可以在 Safari Web Inspector 中验证 DIV 具有高度和宽度。

标签： javascript azure azure-blob-storage

【解决方案1】：

你能试试Vlad - http://jsfiddle.net/79NnG/ 的这个 jsfiddle

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

var img = new Image();
img.src = "data:image/jpeg;base64,"+hexToBase64(getBinary());
alert(hexToBase64(getBinary()));
document.body.appendChild(img);

这篇文章也应该对你有所帮助 - How to display binary data as image - extjs 4

【讨论】：

使用 hexToBase64() 方法，我最终得到一个非常不同的 base64 字符串......但最终仍然没有显示图像。
明确地说，Safari Web Inspector 不会抛出错误消息：“加载资源失败：在此服务器上找不到请求的 URL。”它只是显示为损坏的图像。
你可以试试简单的 btoa（二进制数据）吗？
我在尝试时收到“错误：InvalidCharacterError：DOM 异常 5”。我用响应正文的样本更新了我的原始帖子。