Display thumbnail from Azure AD Graph API in html img

1
votes

I can successfully get what appears to be the png data of a user image but am unable to get it to display in an img element. (Im getting the data by calling - https://graph.windows.net/{my tenant}/users/{my user}/thumbnailPhoto?api-version=1.6)

I have tried src="data:image/png;base64,{THE_DATA_HERE}" but that doesn't seem to work. (Pasting the data here - http://codebeautify.org/base64-to-image-converter didnt work either so apparently its not base64)

Any ideas on how to get this result to appear in an img? (This is being done in JavaScript - client side)

I'm using Angular 2 and have to pass the result through the DOM Sanitizer.bypassSecurityTrustUrl before it will apply it to the src so perhaps my code isn't quite right yet. Anybody have this working in any browser based client?

2
angularadalazure-ad-graph-api
Have you tried to convert the image to Base64 and then show it? Something like let image = btoa(response.thumbnailPhoto); and then src="data:image/png;base64,{image}" ? – dlcardozo
@cameron Tried that. Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. – Stephen
Try with btoa(unescape(encodeURIComponent(response.thumbnailPhoto))) I don't know if this will work with .png files. – dlcardozo
No error, but no picture either :( – Stephen

2 Answers

0
votes

Not familiar with Angular2, however it is easy to use the JavaScript to show the thumbnail based on the Azure AD Graph REST like below:

var oReq = new XMLHttpRequest();
oReq.open("GET", "https://graph.windows.net/{teantId}/users/user1@xxx.onmicrosoft.com/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();

})
0
votes

You likely need to use a IStreamFetcher to request the image. There's a sample here that does this. 

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