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 - 無法顯示用戶個人資料照片

回答

相關問題