빠른 시작: REST API 및 JavaScript를 사용하여 이미지에서 얼굴 감지Quickstart: Detect faces in an image using the REST API and JavaScript

이 빠른 시작에서는 이미지에서 사람 얼굴을 감지하기 위해 JavaScript와 함께 Azure Face REST API를 사용합니다.In this quickstart, you will use the Azure Face REST API with JavaScript to detect human faces in an image.

필수 조건Prerequisites

HTML 파일 초기화Initialize the HTML file

detectFaces.html이라는 새 HTML 파일을 만들고 다음 코드를 추가합니다.Create a new HTML file, detectFaces.html, and add the following code.

<!DOCTYPE html>
<html>
    <head>
        <title>Detect Faces Sample</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>
    <body></body>
</html>

그런 다음, 문서의 body 요소 내에 다음 코드를 추가합니다.Then add the following code inside the body element of the document. 그러면 URL 필드, 얼굴 분석 단추, 응답 창 및 이미지 표시 창으로 구성된 기본 사용자 인터페이스가 설정됩니다.This sets up a basic user interface with a URL field, an Analyze face button, a response pane, and an image display pane.

<h1>Detect Faces:</h1>
Enter the URL to an image that includes a face or faces, then click
the <strong>Analyze face</strong> button.<br><br>
Image to analyze: <input type="text" name="inputImage" id="inputImage"
    value="https://upload.wikimedia.org/wikipedia/commons/c/c3/RH_Louise_Lillian_Gish.jpg" />
<button onclick="processImage()">Analyze face</button><br><br>
<div id="wrapper" style="width:1020px; display:table;">
    <div id="jsonOutput" style="width:600px; display:table-cell;">
        Response:<br><br>
        <textarea id="responseTextArea" class="UIInput"
            style="width:580px; height:400px;"></textarea>
    </div>
    <div id="imageDiv" style="width:420px; display:table-cell;">
        Source image:<br><br>
        <img id="sourceImage" width="400" />
    </div>
</div>

JavaScript 스크립트 작성Write the JavaScript script

문서의 h1 요소 바로 위에 다음 코드를 추가합니다.Add the following code immediately above the h1 element in your document. 그러면 Face API를 호출하는 JavaScript 코드가 설정됩니다.This sets up the JavaScript code that calls the Face API.

<script type="text/javascript">
    function processImage() {
        // Replace <Subscription Key> with your valid subscription key.
        var subscriptionKey = "<Subscription Key>";
    
        // NOTE: You must use the same region in your REST call as you used to
        // obtain your subscription keys. For example, if you obtained your
        // subscription keys from westus, replace "westcentralus" in the URL
        // below with "westus".
        //
        // Free trial subscription keys are generated in the "westus" region.
        // If you use a free trial subscription key, you shouldn't need to change 
        // this region.
        var uriBase =
            "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";
    
        // Request parameters.
        var params = {
            "returnFaceId": "true",
            "returnFaceLandmarks": "false",
            "returnFaceAttributes":
                "age,gender,headPose,smile,facialHair,glasses,emotion," +
                "hair,makeup,occlusion,accessories,blur,exposure,noise"
        };
    
        // Display the image.
        var sourceImageUrl = document.getElementById("inputImage").value;
        document.querySelector("#sourceImage").src = sourceImageUrl;
    
        // Perform the REST API call.
        $.ajax({
            url: uriBase + "?" + $.param(params),
    
            // Request headers.
            beforeSend: function(xhrObj){
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
            },
    
            type: "POST",
    
            // Request body.
            data: '{"url": ' + '"' + sourceImageUrl + '"}',
        })
    
        .done(function(data) {
            // Show formatted JSON on webpage.
            $("#responseTextArea").val(JSON.stringify(data, null, 2));
        })
    
        .fail(function(jqXHR, textStatus, errorThrown) {
            // Display error message.
            var errorString = (errorThrown === "") ?
                "Error. " : errorThrown + " (" + jqXHR.status + "): ";
            errorString += (jqXHR.responseText === "") ?
                "" : (jQuery.parseJSON(jqXHR.responseText).message) ?
                    jQuery.parseJSON(jqXHR.responseText).message :
                        jQuery.parseJSON(jqXHR.responseText).error.message;
            alert(errorString);
        });
    };
</script>

subscriptionKey 필드를 구독 키의 값으로 업데이트해야 하며 올바른 지역 식별자가 포함되도록 uriBase 문자열을 변경해야 할 수도 있습니다(모든 지역 엔드포인트 목록에 대해서는 Face API 설명서 참조).You'll need to update the subscriptionKey field with the value of your subscription key, and you may need to change the uriBase string so that it contains the correct region identifier (see the Face API docs for a list of all region endpoints). returnFaceAttributes 필드는 검색할 얼굴 특성을 지정하며 원하는 용도에 맞게 이 문자열을 변경할 수 있습니다.The returnFaceAttributes field specifies which face attributes to retrieve; you may wish to change this string depending on your intended use.

스크립트 실행Run the script

브라우저에서 detectFaces.html을 엽니다.Open detectFaces.html in your browser. 얼굴 분석 단추를 클릭하면 앱에 지정된 URL의 이미지가 표시되고 얼굴 데이터의 JSON 문자열이 출력됩니다.When you click the Analyze face button, the app should display the image from the given URL and print out a JSON string of face data.

GettingStartCSharpScreenshot

다음은 성공적인 JSON 응답의 예제입니다.The following is an example of a successful JSON response.

[
  {
    "faceId": "49d55c17-e018-4a42-ba7b-8cbbdfae7c6f",
    "faceRectangle": {
      "top": 131,
      "left": 177,
      "width": 162,
      "height": 162
    },
    "faceAttributes": {
      "smile": 0,
      "headPose": {
        "pitch": 0,
        "roll": 0.1,
        "yaw": -32.9
      },
      "gender": "female",
      "age": 22.9,
      "facialHair": {
        "moustache": 0,
        "beard": 0,
        "sideburns": 0
      },
      "glasses": "NoGlasses",
      "emotion": {
        "anger": 0,
        "contempt": 0,
        "disgust": 0,
        "fear": 0,
        "happiness": 0,
        "neutral": 0.986,
        "sadness": 0.009,
        "surprise": 0.005
      },
      "blur": {
        "blurLevel": "low",
        "value": 0.06
      },
      "exposure": {
        "exposureLevel": "goodExposure",
        "value": 0.67
      },
      "noise": {
        "noiseLevel": "low",
        "value": 0
      },
      "makeup": {
        "eyeMakeup": true,
        "lipMakeup": true
      },
      "accessories": [],
      "occlusion": {
        "foreheadOccluded": false,
        "eyeOccluded": false,
        "mouthOccluded": false
      },
      "hair": {
        "bald": 0,
        "invisible": false,
        "hairColor": [
          {
            "color": "brown",
            "confidence": 1
          },
          {
            "color": "black",
            "confidence": 0.87
          },
          {
            "color": "other",
            "confidence": 0.51
          },
          {
            "color": "blond",
            "confidence": 0.08
          },
          {
            "color": "red",
            "confidence": 0.08
          },
          {
            "color": "gray",
            "confidence": 0.02
          }
        ]
      }
    }
  }
]

다음 단계Next steps

이 빠른 시작에서는 Azure Face API를 호출하는 JavaScript 스크립트를 작성하여 이미지에서 얼굴을 감지하고 특성을 반환했습니다.In this quickstart, you wrote a JavaScript script that calls the Azure Face API to detect faces in an image and return their attributes. 다음에는 Face API 참조 설명서를 살펴보고 보다 자세히 알아보겠습니다.Next, explore the Face API reference documentation to learn more.