Question

我正在编写一个从Microsoft Graph请求用户个人资料照片的应用程序。一切都很顺利 - 请求返回200状态代码，显然有很大一部分数据可以返回，一切似乎都很好。但是当我实际尝试将照片插入图像标签时，浏览器拒绝显示它。根据我的理解，Graph将图像作为jpeg二进制文件返回，但我知道/已经搜索过的将图像二进制文件转换为浏览器可显示格式的每个方法都失败了。

使用btoa会产生此错误：

未捕获DOMException：失败执行＆＃39; btoa＆＃39; on＆＃39; Window＆＃39;：要编码的字符串包含 Latin1范围之外的字符。
以下列方式使用FileReader（使用TypeScript和 jQuery）产生一个结果，但浏览器仍然没有渲染它：

＆＃13;

//Where photo is the data as a string
let blob = new Blob([photo], { type: "image/jpeg" });
let reader = new FileReader();
reader.addEventListener("load", (e: any) => {
    let imgSrc = e.target.result;
    $("img").attr("src", imgSrc);
});
reader.readAsDataURL(blob);

＆＃13;

像这样使用URL.createObjectURL也解析，但不显示任何内容

＆＃13;

let blob = new Blob([photo], { type: "image/jpeg" });
let url = URL.createObjectURL(blob);
$("img").attr("src", url);

＆＃13;

在类型属性上尝试各种排列，例如不同的图像格式和＆＃39; octet-binary＆＃39;在blob构造函数中也失败了。此外，图像显然是JPEG，因为在Chrome的调试器显示＆＃34; JFIF＆＃34;在前几个字符
从这个问题的最佳答案中尝试自定义hex-to-base64函数也失败了：How to display binary data as image - extjs 4

＆＃13;

$("img").attr("src", "data:image/jpeg;base64," + hexToBase64(photo));

＆＃13;

当然，只是将未修改的图像二进制文件嵌入为数据源也会失败。

此时我完全没有想法。有人有什么建议吗？

Answer 1

我创建了一个示例Web应用，供人们使用名为Visual Graph Explorer的Graph API。使用O365凭据登录Web应用程序后，您将看到它开始下拉用户照片。如果您想查看完整的来源，可以在GitHub上查看。

显示用户照片的代码如下所示。我在这里使用angular，但关键是使用func getJSON(url:String) -> NSData { return NSData(contentsOfURL: NSURL(string: url)!)! }方法将响应数据转换为可由浏览器呈现的URL。这非常接近你的第二个例子。

graphPersonPhotoDirective.js

createObjectUrl

graph-person-photo.html

function successCallback(response) {
    var url = window.URL || window.webkitURL;
    var blobUrl = url.createObjectURL(response.data);
    $scope.myPhoto = blobUrl;
    Cache.save(blobUrl, $scope.personId);
}

我希望这有帮助！

Microsoft Graph - 无法显示用户个人资料照片

1 个答案: