我如何用Angular 9将https:/graph.microsoft.comv1.0mephoto$value响应转换为图片？

Question

我怎么能转换一个 https:/graph.microsoft.comv1.0mephoto$value 答以 Angular9 到图像

请在此输入图片描述

Answer 1

因为返回的图像是图像的二进制表示，你需要将其转换为图像来读取。下面是一个针对angular的例子。

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

这个项目是一个如何用angular使用graph显示用户信息的例子。链接直接进入到关于图像转换的小部分。https:/github.comOfficeDevO365-Angular-Microsoft-Graph-Profileblob7ed7e89a03525fa79b9d6bed7fb17d257a4c9ff2appcontrollersmainController.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) => {
      // Error
      console.log(err);
    }
  );

}