从Microsoft Graph API解析图像 [英] Parse Image from Microsoft Graph API

问题描述

在我查找www，stackoverflow和youtube之后，我找不到具体的答案，如何正确地从中获取图像：

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

在TypeScript / JavaScript中。我认为解决方案真的很容易。您只需在 GET 请求中获取此附加信息：

  responseType ：ResponseContentType.ArrayBuffer 
  

解决方案

完整的解决方案如下所示：

 从@ angular / platform-b​​rowser导入{DomSanitizer}; 
从@ angular / http导入{Http，Headers，ResponseContentType}; 
 importrxjs / add / operator / map; 
 import {AlertController}来自ionic-angular; 
 
导出类GraphService {
构造函数（
私有http：Http，
 private alertCtrl：AlertController，
私有卫生处理器：DomSanitizer 
）{ } 
 
 transform（html）{
 return this.sanitizer.bypassSecurityTrustUrl（html）; 
} 
 
 getProfileImage（accessToken：string）{
 // fetch用户个人头像
 let headers：Headers = new Headers（）; 
 headers.append（授权，持票人+ accessToken）; 
 this.http 
 .get（https://graph.microsoft.com/beta/me/photo/$value，{
 responseType：ResponseContentType.ArrayBuffer，
标题：标题
}）
 .map（res => res）
 .subscribe（
（data：any）=> {
 let blob = new Blob（[data.arrayBuffer（）]，{
类型：data.headers.get（content-type）
}）; 
 let imageUrl = window.URL.createObjectURL（blob ）; 
 
返回this.transform（imageUrl））; 
}，
 error => {
 let alert = this.alertCtrl.create（{
 title：GraphProvider，
 subTitle：无法获取个人资料图片！，
按钮：[确定] 
}）; 
 alert.present（）; 
} 
）; 
} 
} 
  

最重要的部分是：不要追加标题中的 responseType：ResponseContentType.ArrayBuffer ！你必须在标题旁边提供它！并且不要忘记从 @ angular / http 导入它！

我希望我可以帮助所有丢失的灵魂在那里：D

PS：感谢Micheal Mainer的Graph Explorer Repo：

After i looked up the www, stackoverflow and youtube, i couldn't find an concrete answer about, how to fetch an image correctly from:

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

in TypeScript/JavaScript. The solution is really easier as i thought. You just need this an additional information in your GET Request:

responseType: ResponseContentType.ArrayBuffer

解决方案

The complete solution looks like this:

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

The most important part is: don't append the responseType: ResponseContentType.ArrayBuffer in your header! You have to provide it beside the header! And don't forget to import it from @angular/http!

I hope I could help all the lost souls out there :D

PS: Thanks to Micheal Mainer for the Graph Explorer Repo: https://github.com/microsoftgraph/microsoft-graph-explorer/tree/e2a376615d14c5eabd51e972478b18827800d323

here's my fetched Image from Microsoft Graph API:

这篇关于从Microsoft Graph API解析图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！