クイック スタート:REST API と JavaScript を使用して画像内の顔を検出するQuickstart: Detect faces in an image using the REST API and JavaScript

このクイック スタートでは、Azure Face REST API と JavaScript を使用して、画像から人の顔を検出します。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

新しい HTML ファイル (detectFaces.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 フィールド、 [Analyze face] ボタン、応答ウィンドウ、画像表示ウィンドウを備えた基本的なユーザー インターフェイスが設定されます。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. [Analyze face] ボタンをクリックすると、指定された 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 サービスを呼び出して画像内の顔を検出し、その属性を返す JavaScript スクリプトを作成しました。In this quickstart, you wrote a JavaScript script that calls the Azure Face service to detect faces in an image and return their attributes. この後は、Face API のリファレンス ドキュメントでさらに理解を深めましょう。Next, explore the Face API reference documentation to learn more.