关键词：
【中文标题】使用 Angular 7 使用 Azure Face Api 进行人脸识别【英文标题】：Face recognition with Azure Face Api using Angular 7 【发布时间】：2019-10-05 04:36:12 【问题描述】：我需要开发一个将 Angular 与 Azure 人脸 API 结合使用的人脸识别系统。但是，Azure Face API 的文档是用 C# 编写的。谁能帮我把它改写成打字稿？
This 是 Azure 人脸 API 中人脸识别的准则
https://westus.api.cognitive.microsoft.com/face/v1.0/detect[?returnFaceId][&returnFaceLandmarks][&returnFaceAttributes]
&subscription-key=<Subscription key>
faceServiceClient = new FaceServiceClient("<Subscription Key>");
// Create an empty PersonGroup
string personGroupId = "myfriends";
await faceServiceClient.CreatePersonGroupAsync(personGroupId, "My Friends");
// Define Anna
CreatePersonResult friend1 = await faceServiceClient.CreatePersonAsync(
// Id of the PersonGroup that the person belonged to
personGroupId,
// Name of the person
"Anna"
);
// Directory contains image files of Anna
const string friend1ImageDir = @"D:\Pictures\MyFriends\Anna\";
foreach (string imagePath in Directory.GetFiles(friend1ImageDir, "*.jpg"))
using (Stream s = File.OpenRead(imagePath))
// Detect faces in the image and add to Anna
await faceServiceClient.AddPersonFaceAsync(
personGroupId, friend1.PersonId, s);
【问题讨论】：
添加示例代码和代码仓库路径，因为您是新的 SO 成员，但请确保检查 ***.blog/2010/10/04/asking-better-questions 【参考方案1】：这是用于人脸识别的打字稿中的示例代码。
import HttpClient, HttpHeaders, HttpParams from '@angular/common/http';
import Injectable from '@angular/core';
import environment from '../../environments/environment';
@Injectable()
export class FaceRecognitionService
constructor(private httpClient: HttpClient)
scanImage(subscriptionKey: string, base64Image: string)
const headers = this.getHeaders(subscriptionKey);
const params = this.getParams();
const blob = this.makeblob(base64Image);
return this.httpClient.post<FaceRecognitionResponse>(
environment.endpoint,
blob,
params,
headers
);
private makeblob(dataURL)
const BASE64_MARKER = ';base64,';
const parts = dataURL.split(BASE64_MARKER);
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i)
uInt8Array[i] = raw.charCodeAt(i);
return new Blob([uInt8Array], type: contentType );
private getHeaders(subscriptionKey: string)
let headers = new HttpHeaders();
headers = headers.set('Content-Type', 'application/octet-stream');
headers = headers.set('Ocp-Apim-Subscription-Key', subscriptionKey);
return headers;
private getParams()
const httpParams = new HttpParams()
.set('returnFaceId', 'true')
.set('returnFaceLandmarks', 'false')
.set(
'returnFaceAttributes',
'age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'
);
return httpParams;
完整代码参考请参考：
https://github.com/F***Gosebrink/angular-face-recognition-api/tree/master/src/app
希望这会有所帮助。
【讨论】：
登录后如何获取用户名？我正在尝试使用 MSAL（@azure/msal-angular）进行 Azure 登录
...登录后如何获取用户名？我正在尝试使用MSAL（@azure/msal-angular）进行Azure登录【英文标题】：Howtogetusernameafterloggedin?.IamtryingwithMSAL(@azure/msal-angular)forAzureSignin【发布时间】：2021-03-0823:40:34【问题描述】：我正在尝试使用MSAL(@azure/msa... 查看详情
在 Azure 中使用路由托管 Angular2 应用
】在Azure中使用路由托管Angular2应用【英文标题】：HostAngular2appwithroutinginAzure【发布时间】：2017-08-0419:08:37【问题描述】：我正在使用Angularcli在Angular2中开发一个应用程序。该应用程序运行良好，当我在Azure中部署它时运行正常，... 查看详情
在 azure 上使用 Angular 应用程序部署 Web API2.0
】在azure上使用Angular应用程序部署WebAPI2.0【英文标题】：DeployinganWebAPI2.0withangularapplicationonazure【发布时间】：2021-05-2812:39:44【问题描述】：我们使用WebAPI2.0和Angular9作为前端创建了项目。现在我们想使用iis服务在azureVM上部署这... 查看详情
使用 docker 和 azure 容器注册表在 azure kubernetes 中部署 Angular 和 Spring Boot 应用程序
】使用docker和azure容器注册表在azurekubernetes中部署Angular和SpringBoot应用程序【英文标题】：deployangularandsprintbootappinazurekubernetesusingdockerandazurecontainerregistry【发布时间】：2021-07-2202:09:05【问题描述】：我是AKS、ACR和DevOps管道的新手... 查看详情
如何使用 edgecast Azure CDN 修复 Angular 2 应用程序的路由？
】如何使用edgecastAzureCDN修复Angular2应用程序的路由？【英文标题】：howdoIfixroutingforAngular2appusingedgecastAzureCDN?【发布时间】：2017-10-3108:00:59【问题描述】：对于我的Angular应用，这里是app.routing.ts文件：constappRoutes:Routes=[path:\'\',compo... 查看详情
使用 Angular 8 中的 MSAL 库获取 Microsoft Azure AD 组名称列表
】使用Angular8中的MSAL库获取MicrosoftAzureAD组名称列表【英文标题】：GetlistofMicrosoftAzureADgroupnamesusingMSALlibraryinAngular8【发布时间】：2021-04-1801:01:14【问题描述】：我正在开发一个Angular8应用程序，它试图检索登录用户可用的所有Micro... 查看详情
使用 MSAL Angular 包装器在 Ionic 4 中处理来自 Azure AD 的回调
】使用MSALAngular包装器在Ionic4中处理来自AzureAD的回调【英文标题】：HandlingcallbackfromAzureADinIonic4withMSALAngularwrapper【发布时间】：2019-12-2610:23:48【问题描述】：我们正在使用Angular7构建一个Ionic4应用，并且我们希望针对AzureADv2端点... 查看详情
在 azure 上部署 Angular 应用程序
】在azure上部署Angular应用程序【英文标题】：Deployangularapplicationonazure【发布时间】：2020-05-2503:47:39【问题描述】：我的前端应用程序在nodejs和express上的角度和后端服务上。我想在Azure上部署这些应用程序。我使用Azure应用服务来... 查看详情
如何在 Angular 10 中设置 Azure 媒体播放器打字稿定义
】如何在Angular10中设置Azure媒体播放器打字稿定义【英文标题】：HowtosetupAzureMediaPlayertypescriptdefinitioninAngular10【发布时间】：2020-12-1014:57:06【问题描述】：我在为Angular10项目中的Azure媒体播放器设置打字稿定义时遇到问题。我正... 查看详情
Angular - Azure Key Vault 管理 Vault 访问机密
】Angular-AzureKeyVault管理Vault访问机密【英文标题】：Angular-AzureKeyVaultManagingVaultAccesssecrets【发布时间】：2020-08-2717:06:21【问题描述】：是否可以使用AzureKeyVault在Angular应用中获取保管库访问机密？我正在使用隐式流处理AzureActiveDire... 查看详情
从 Angular 前端调用受 Azure AD 保护的 Web API
】从Angular前端调用受AzureAD保护的WebAPI【英文标题】：CallinganAzureADsecuredWebAPIfromAngularFrontend【发布时间】：2019-12-0310:59:36【问题描述】：我目前正在开发一个Angular前端，它使用MSAL对用户进行身份验证。此前端应调用受AzureActiveDir... 查看详情
使用刷新令牌 adal azure AD 静默更新访问令牌
...alazureAD【发布时间】：2018-12-2012:33:08【问题描述】：环境Angular5前端使用Adal-Angular进行AzureAD身份验证当前情景用户身份验证成功并获取访问/刷新令牌一段时间后，访问令牌过期。在后续请求中，用户被重定向回Azure登录页面，然... 查看详情
使用 Angular 7 + Webpack 4 封装 css
】使用Angular7+Webpack4封装css【英文标题】：EncapsulatedcsswithAngular7+Webpack4【发布时间】：2019-08-0322:56:01【问题描述】：我有一个带有Angular1.x和Angular7路由的hybrid环境。Angular1.x路由使用旧的引导程序3，而Angular7应该使用引导程序4。... 查看详情
如何使用 Electron 菜单执行 Angular 7 导航
】如何使用Electron菜单执行Angular7导航【英文标题】：HowtouseElectronmenutoexecuteangular7navigation【发布时间】：2019-04-3013:58:02【问题描述】：我正在使用angular5.2.11和选举版本3.0.7，并尝试使用Electron菜单导航到angular5组件。当我点击电... 查看详情
Angular 7 - 使用父可放置容器拖放
】Angular7-使用父可放置容器拖放【英文标题】：Angular7-Dragdropwithparentdroppablecontainer【发布时间】：2019-04-0209:55:26【问题描述】：我正在尝试使用新的Angular7CDK拖放来移动我网站中动态添加的元素列表。使用thisexample，取自angular文... 查看详情
如何在 Angular 7 中使用 jQuery 插件
】如何在Angular7中使用jQuery插件【英文标题】：HowusejQueryplugininAngular7【发布时间】：2019-12-1613:14:07【问题描述】：我正在使用一个扩展jQuery的js插件来转换xml2json。(pluginhere)我在旧的AngularJs应用程序中使用它并且它工作正常，但... 查看详情
Angular 7 - 使用 FormControl 字段启用提交表单
】Angular7-使用FormControl字段启用提交表单【英文标题】：Angular7-enablesubmitformwithFormControlfield【发布时间】：2021-02-1015:37:18【问题描述】：我的FormGroup有3个字段：2个文本字段和1个FormControl。所有字段都是必需的，FormControl有一个特... 查看详情
使用 Angular 7 显示 JSON 数据
】使用Angular7显示JSON数据【英文标题】：DisplayingJSONDataUsingAngular7【发布时间】：2019-07-1209:00:07【问题描述】：我正在尝试从服务器显示此JSON数据："buySell":["date":"2015-03-02","close":120.351,"buySell":"Sell","date":"2019-01-02","close":157.2455,"buyS... 查看详情