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

Question

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

• 使用 btoa 会产生此错误:

  未捕获的 DOMException:失败 在“Window”上执行“btoa”:要编码的字符串包含 Latin1 范围之外的字符。

• 按以下方式使用 FileReader(使用 TypeScript 和 jQuery) 产生结果，但浏览器仍然不渲染它:

//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);

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

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

• 尝试对 type 属性进行各种排列(例如不同的图像格式和 blob 构造函数中的“八位字节二进制”)也会失败。此外，该图像显然是 JPEG，因为在 Chrome 调试器中将其打印为字符串，在前几个字符中显示“JFIF”
• 尝试此问题的最佳答案中的自定义十六进制到 Base64 函数也失败:How to display binary data as image - extjs 4

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

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

此时我已经完全没有想法了。大家有什么建议吗？

Answer 1

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

显示用户照片的代码如下所示。我这里使用的是 Angular，但关键是使用 createObjectUrl 方法将响应数据转换为浏览器可以渲染的 URL。这与您的第二个示例非常接近。

graphPersonPhotoDirective.js

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

graph-person-photo.html

<div class="circular-container">
    <div class="circular" style="background-image: url('{{myPhoto}}')"></div>
</div>

希望这会有所帮助!