从 MS Graph API 获取用户照片并显示图像

Question

我很抱歉这是一个非常具体的问题，但我很绝望，我会很感激任何 hints/directions。

场景如下：我正在发出 HTTP GET 请求以检索 profilePhoto 并更新我的 Angular 应用程序中的图像配置文件。

这是我的 graph.service:

import { Injectable } from "@angular/core";
import { Http, Headers } from "@angular/http";
import { AdalService } from "../adal/adal.service";

@Injectable()
export class GraphService {
  private graphUri = "https://graph.microsoft.com/v1.0/";

  constructor(private http: Http, private adalService: AdalService) {}

  public userPhoto(upn: string) {
    return this.http
      .get(
        this.graphUri +
          "users/" +
          this.adalService.userInfo.profile.upn +
          "/photo/$value",
        { headers: this.headers() }
      )
      .map(res => res);
  }

  private headers() {
    const headers = new Headers();
    headers.set("Authorization", this.adalService.token);
    return headers;
  }
}

在我打算使用它的 home.component 上，我有：

this.graphService.userPhoto().subscribe(resp => {
  if (resp.status === 200) {
    const dataToString = resp.arrayBuffer();
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(dataToString);
    // Here there's an error:
    // 'Argument of type Array Buffer is not assignable
    //  to parameter of type Blob.
    const image = "data:image/jpeg;base64," + dataToString;
    document.getElementById("photo").setAttribute("src", image);
  }
});

老实说，我什至不知道自己走的路是否正确...我在某处读到过 FileReader。但起初，这是我的尝试：

this.graphService.userPhoto().subscribe(resp => {
  if (resp.status === 200) {
    const dataToString = resp.text();
    const image = "data:image/jpeg;base64," + btoa(encodeURI(dataToString));
    document.getElementById("photo").setAttribute("src", image);
  }
});

dataToString 包含如下内容： ��JFIF``��C 我理解为二进制数据。

需要说明的是，GET 请求 returns 200，不记名令牌有效。我只是以某种方式无法显示它...

我做错了什么？应该如何处理？

非常感谢！

编辑 1： @RasmusW - 我添加 encodeURI 调用的唯一原因是因为没有它我会得到以下错误：

ERROR DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

使用 encodeURI 我的 img HTML 标签看起来像这样：

<img _ngcontent-c2="" id="photo" src="data:image/jpeg;base64, JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJTAwJTEw(shortened)">

但是，图像没有显示。

Answer 1

您需要图像的 base64 编码表示。这不仅仅是将二进制数据转换为字符串。

为了让它工作，您需要告诉 Angular 使用 responseType 参数期待一个 Blob。这让它知道不要尝试将其解析为 JSON。您将该 blob 转换为数据 URI。

在 Stack Overflow 上有几种关于其工作原理的解释（带有示例）：

从 MS Graph API 获取用户照片并显示图像

Get User Photo from MS Graph API and display image

typescript

angular5

microsoft-graph-api