在html中顯示來自Azure AD Graph API的縮略圖img

我可以成功獲取似乎是用戶圖像的png數據，但無法使其顯示在img元素中。（IM通過調用獲取數據 - https://graph.windows.net/ {我的租戶} /用戶/ {我的用戶} /thumbnailPhoto?api-version=1.6）在html中顯示來自Azure AD Graph API的縮略圖img

我試圖 SRC =「數據：圖像/ PNG; BASE64，{ THE_DATA_HERE}「但這似乎不起作用。（在這裏粘貼數據 - http://codebeautify.org/base64-to-image-converter沒有工作，所以顯然它不是base64）

關於如何讓這個結果出現在img的任何想法？（這是在JavaScript中完成的 - 客戶端）

我使用的是Angular 2，必須通過DOM Sanitizer.bypassSecurityTrustUrl將結果應用到src之前，因此可能我的代碼並不完全正確然而。任何人都可以在任何基於瀏覽器的客戶端上工作？

來源

2017-02-24 Stephen

您是否嘗試過將圖像轉換爲Base64和然後顯示它？像'let image = btoa（response.thumbnailPhoto）;'然後'src =「data：image/png; base64，{image}」''？ –

@cameron試過了。未捕獲的DOMException：無法在'Window'上執行'btoa'：要編碼的字符串包含Latin1範圍之外的字符。 – Stephen

嘗試用'btoa（unescape（encodeURIComponent（response.thumbnailPhoto）））'我不知道這是否可以用於.png文件。 –

不熟悉Angular2，但它很容易使用JavaScript以顯示基於Azure的AD圖REST像下面的縮略圖：

var oReq = new XMLHttpRequest(); 
oReq.open("GET", "https://graph.windows.net/{teantId}/users/[email protected]/thumbnailPhoto?api-version=1.6", true); 
oReq.setRequestHeader("authorization","bearer {access_token}") 
oReq.responseType = "blob"; 

oReq.onload = function(oEvent) { 

var imageUrl = window.URL.createObjectURL(oReq.response); 
var img = document.createElement('img'); 
img.src = imageUrl ; 
document.body.appendChild(img); 

}; 

oReq.send(); 

})

來源

2017-02-27 08:48:01

這是行之有效的。謝謝。現在我只需要映射到Angular 2. http://stackoverflow.com/questions/42076193/angular2-how-to-handle-a-async- image-blob-request看起來很有希望。我沒有看到上週的那個。 – Stephen

您可能需要使用IStreamFetcher來請求圖像。有一個樣本here這樣做。

 IUser sUser = (IUser) signedInUser; 
     IStreamFetcher photo = (IStreamFetcher) sUser.ThumbnailPhoto; 
     try 
     { 
      DataServiceStreamResponse response = 
       await photo.DownloadAsync(); 
      Console.WriteLine("\nUser {0} GOT thumbnailphoto", signedInUser.DisplayName); 
     } 
     catch (Exception e) 
     { 
      Program.WriteError("\nError getting the user's photo - may not exist {0}", 
       Program.ExtractErrorMessage(e)); 
     }

來源

2017-02-24 20:42:43

我沒有使用C＃，我試圖在JavaScript中做這個客戶端（碰巧是Angular 2），如果沒有辦法做到，我想我可以做它服務器端（我有一個C＃API我的客戶談話），但現在我想在客戶端完全做到這一點（更新的問題，使更清晰） – Stephen

@Stephen阿好吧，你必須找到一個JavaScript庫來做到這一點[這裏是]（https://www.npmjs.com/browse/keyword/thumbnail）一些npm包，這將有所幫助。個人沒有在JS中這樣做，所以我沒有一個很好的建議 –

謝謝，下週我會環顧一下當我有機會，但我希望我新到底是什麼，我試圖做什麼，從什麼翻譯base64 – Stephen

在html中顯示來自Azure AD Graph API的縮略圖img

回答

相關問題