Question

使用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

Answer 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

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

1 个答案: