使用 Angular 7 使用 Azure Face Api 进行人脸识别

Posted 2023-03-16

【中文标题】使用 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

希望这会有所帮助。