从微软API图形图像解析(Parse Image from Microsoft Graph API)

2019-10-29 18:26发布

我抬头看了看WWW,计算器和YouTube后,我找不到任何关于如何正确地获取图像的具体的答案:

https://graph.microsoft.com/beta/me/photo/$value

在打字稿/ JavaScript的。 该解决方案是因为我以为真是站着。 你只需要在这您的附加信息GET请求:

responseType: ResponseContentType.ArrayBuffer

Answer 1:

完整的解决方案如下:

import { DomSanitizer } from "@angular/platform-browser";
import { Http, Headers, ResponseContentType } from "@angular/http";
import "rxjs/add/operator/map";
import { AlertController } from "ionic-angular";

export class GraphService {
constructor(
   private http: Http,
   private alertCtrl: AlertController,
   private sanitizer: DomSanitizer
) {}

transform(html) {
   return this.sanitizer.bypassSecurityTrustUrl(html);
}

getProfileImage(accessToken: string) {
    // fetch User Profile Image
    let headers: Headers = new Headers();
    headers.append("Authorization", "Bearer " + accessToken);
    this.http
      .get("https://graph.microsoft.com/beta/me/photo/$value", {
        responseType: ResponseContentType.ArrayBuffer,
        headers: headers
      })
      .map(res => res)
      .subscribe(
        (data: any) => {
          let blob = new Blob([data.arrayBuffer()], {
            type: data.headers.get("content-type")
          });
          let imageUrl = window.URL.createObjectURL(blob);

          return this.transform(imageUrl));
        },
        error => {
          let alert = this.alertCtrl.create({
            title: "GraphProvider",
            subTitle: "Can't fetch profile image!",
            buttons: ["OK"]
          });
          alert.present();
        }
      );
}
}

最重要的部分是:不追加responseType: ResponseContentType.ArrayBuffer在你的头! 你必须提供它的头旁边! 而且不要忘了从导入@angular/http

我希望我能帮助所有迷失的灵魂在那里:D

PS:感谢迈克尔更主要的图形浏览器回购: https://github.com/microsoftgraph/microsoft-graph-explorer/tree/e2a376615d14c5eabd51e972478b18827800d323

这是我从微软图形API获取的图片:



文章来源: Parse Image from Microsoft Graph API