빠른 시작: 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 code 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 code 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>";
    
        var uriBase =
            "https://<My Endpoint String>.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 문자열을 변경해야 합니다.You'll need to update the subscriptionKey field with the value of your subscription key, and you need to change the uriBase string so that it contains the correct endpoint string. returnFaceAttributes 필드는 검색할 얼굴 특성을 지정하며 원하는 용도에 맞게 이 문자열을 변경할 수 있습니다.The returnFaceAttributes field specifies which face attributes to retrieve; you may wish to change this string depending on your intended use.

참고

2019년 7월 1일 이후에 만들어진 새 리소스는 사용자 지정 하위 도메인 이름을 사용합니다.New resources created after July 1, 2019, will use custom subdomain names. 자세한 내용 및 지역별 엔드포인트의 전체 목록은 Cognitive Services에 대한 사용자 지정 하위 도메인 이름을 참조하세요.For more information and a complete list of regional endpoints, see Custom subdomain names for Cognitive Services.

스크립트 실행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 text 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.