我如何将带有 Angular 9 的 https://graph.microsoft.com/v1.0/me/photo/$value 响应转换为图像

Question

我如何将 https://graph.microsoft.com/v1.0/me/photo/$value 响应与 Angular9 转换为图像

enter image description here

Answer 1

因为返回的图像是图像的二进制表示，您需要对其进行转换才能读取。这是 angular 的示例。

var imageUrl = 'data:image/*;base64,' + res.data;

这个项目是一个例子，展示了如何使用图表 angular 来显示用户信息。 link 直接转到有关图像转换的小部分。 https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Profile/blob/7ed7e89a03525fa79b9d6bed7fb17d257a4c9ff2/app/controllers/mainController.js#L120

Answer 2

getProfileImg() {
this.http
  .get('https://graph.microsoft.com/v1.0/me/photos/48x48/$value', {
    headers: { 'Content-Type': 'image/*' },
    responseType: 'arraybuffer',
  })
  .toPromise()
  .then(
    (data) => {
      const TYPED_ARRAY = new Uint8Array(data);
      // converts the typed array to string of characters
      const STRING_CHAR = String.fromCharCode.apply(null, TYPED_ARRAY);

      //converts string of characters to base64String
      let base64String = btoa(STRING_CHAR);

      //sanitize the url that is passed as a value to image src attrtibute
      this.profileImg = this.sanitizer.bypassSecurityTrustUrl(
        'data:image/*;base64, ' + base64String
      );

      console.log(this.profileImg);
    },
     (err) => {
      this.profileImg = '../../assets/img/account_circle-black-48dp.svg';
    }
  );

}

我如何将带有 Angular 9 的 https://graph.microsoft.com/v1.0/me/photo/$value 响应转换为图像

How can i convert a https://graph.microsoft.com/v1.0/me/photo/$value response with Angular 9 to an image

azure-ad-graph-api

angular9