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

我正在写一个应用程序，请求Microsoft Graph的用户个人资料照片。一切都很顺利 - 请求以200状态代码返回，显然有一大块数据会被返回，并且一切看起来都不错。但是当我真的试图将照片插入图像标签时，浏览器拒绝显示它。现在据我了解，Graph返回的图像是一个jpeg二进制文件，但是我知道的每个搜索方法都是将图像二进制文件转换为浏览器可显示的格式。Microsoft Graph - 无法显示用户个人资料照片

使用BTOA产生这样的错误：

未捕获的抛出：DOMException：无法上执行“窗口”“BTOA”：将被编码的字符串包含Latin1的范围之外字符。
使用以下列方式一的FileReader（具有打字稿和 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属性正在尝试各种排列。此外，由于在Chrome的调试器中以字符串形式显示，图像显示为JPEG，因此在头几个字符中显示“JFIF”。
尝试从该问题的顶部答案中自定义hex-to-base64函数也失败：How to display binary data as image - extjs 4

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

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

在这一点上，我完全没有想法。任何人有任何建议？

来源

2016-05-07 gecslam

我创建了一个示例web应用程序供人们使用图形API称为Visual Graph Explorer。一旦你登录到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>

我希望这有助于！

来源

2016-05-10 17:36:10

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

回答

相关问题