使用於 JavaScript - Amazon Rekognition
JavaScript 範本程式碼獲取 Amazon Cognito 身分池識別碼

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用於 JavaScript

以下 JavaScript 網頁範例可讓使用者選擇映像並檢視在映像中偵測到之人臉的估測年齡。估測年齡將由對 DetectFaces 的呼叫傳回。

所選映像已使用 JavaScript FileReader.readAsDataURL 函數載入，並以 base64 編碼映像。此步驟對於顯示 HTML 畫布上的映像有幫助。但是，這表示映像位元組需要在傳遞到 Amazon Rekognition Image 操作前解碼。此範例說明如何解碼已載入的映像位元組。如果已編碼的映像位元組對您來說沒有幫助，請改用 FileReader.readAsArrayBuffer，因為載入的映像未經過編碼。這表示可以在未先解碼映像位元組的情況下呼叫 Amazon Rekognition Image 操作。如需範例，請參閱「使用 readAsArrayBuffer」。

若要執行 JavaScript 範本

  1. 載入範例原始程式碼到編輯器。

  2. 取得 Amazon Cognito 身分池識別碼。如需詳細資訊，請參閱 獲取 Amazon Cognito 身分池識別碼。

  3. 在範本程式碼的 AnonLog 函數中，變更 IdentityPoolIdToUse 與 RegionToUse 為您在 獲取 Amazon Cognito 身分池識別碼 步驟 9 中記下的值。

  4. 在 DetectFaces 函數中，變更 RegionToUse 為您在之前的步驟中使用的值。

  5. 將範例原始程式碼儲存為 .html 檔案。

  6. 載入檔案到您的瀏覽器。

  7. 選擇瀏覽... 按鈕，然後選擇其中包含一或多個人臉的映像。將顯示一個資料表，其中包含每個於映像中偵測到的人臉之估測年齡。

注意

以下程式碼範例使用不再是 Amazon Cognito 一部分的兩個指令碼。若要取得這些檔案，請按 aws-cognito-sdk.min.js 和 amazon-cognito-identity.min.js 的連結，將各連結的文字另存為個別的 .js 檔案。

JavaScript 範本程式碼

下列程式碼範例使 JavaScript V2。如需 JavaScript V3 中的範例，請參閱 AWS 文件開發套件範例 GitHub 儲存庫中的範例。

<!--
Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
PDX-License-Identifier: MIT-0 (For details, see https://github.com/awsdocs/amazon-rekognition-developer-guide/blob/master/LICENSE-SAMPLECODE.)
-->
<!DOCTYPE html>
<html>
<head>
  <script src="aws-cognito-sdk.min.js"></script>
  <script src="amazon-cognito-identity.min.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.16.0.min.js"></script>
  <meta charset="UTF-8">
  <title>Rekognition</title>
</head>

<body>
  <H1>Age Estimator</H1>
  <input type="file" name="fileToUpload" id="fileToUpload" accept="image/*">
  <p id="opResult"></p>
</body>
<script>

  document.getElementById("fileToUpload").addEventListener("change", function (event) {
    ProcessImage();
  }, false);
  
  //Calls DetectFaces API and shows estimated ages of detected faces
  function DetectFaces(imageData) {
    AWS.region = "RegionToUse";
    var rekognition = new AWS.Rekognition();
    var params = {
      Image: {
        Bytes: imageData
      },
      Attributes: [
        'ALL',
      ]
    };
    rekognition.detectFaces(params, function (err, data) {
      if (err) console.log(err, err.stack); // an error occurred
      else {
       var table = "<table><tr><th>Low</th><th>High</th></tr>";
        // show each face and build out estimated age table
        for (var i = 0; i < data.FaceDetails.length; i++) {
          table += '<tr><td>' + data.FaceDetails[i].AgeRange.Low +
            '</td><td>' + data.FaceDetails[i].AgeRange.High + '</td></tr>';
        }
        table += "</table>";
        document.getElementById("opResult").innerHTML = table;
      }
    });
  }
  //Loads selected image and unencodes image bytes for Rekognition DetectFaces API
  function ProcessImage() {
    AnonLog();
    var control = document.getElementById("fileToUpload");
    var file = control.files[0];

    // Load base64 encoded image 
    var reader = new FileReader();
    reader.onload = (function (theFile) {
      return function (e) {
        var img = document.createElement('img');
        var image = null;
        img.src = e.target.result;
        var jpg = true;
        try {
          image = atob(e.target.result.split("data:image/jpeg;base64,")[1]);

        } catch (e) {
          jpg = false;
        }
        if (jpg == false) {
          try {
            image = atob(e.target.result.split("data:image/png;base64,")[1]);
          } catch (e) {
            alert("Not an image file Rekognition can process");
            return;
          }
        }
        //unencode image bytes for Rekognition DetectFaces API 
        var length = image.length;
        imageBytes = new ArrayBuffer(length);
        var ua = new Uint8Array(imageBytes);
        for (var i = 0; i < length; i++) {
          ua[i] = image.charCodeAt(i);
        }
        //Call Rekognition  
        DetectFaces(ua);
      };
    })(file);
    reader.readAsDataURL(file);
  }
  //Provides anonymous log on to AWS services
  function AnonLog() {
    
    // Configure the credentials provider to use your identity pool
    AWS.config.region = 'RegionToUse'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: 'IdentityPoolIdToUse',
    });
    // Make the call to obtain credentials
    AWS.config.credentials.get(function () {
      // Credentials will be available when this function is called.
      var accessKeyId = AWS.config.credentials.accessKeyId;
      var secretAccessKey = AWS.config.credentials.secretAccessKey;
      var sessionToken = AWS.config.credentials.sessionToken;
    });
  }
</script>
</html>

使用 readAsArrayBuffer

以下程式碼片段是使用 JavaScript V2 實現範例程式碼中 ProcessImage 函數的另一種實作。它使用 readAsArrayBuffer 來載入映像並呼叫 DetectFaces。由於 readAsArrayBuffer 不會將載入的檔案以 Base64 編碼，在呼叫 Amazon Rekognition Image 操作前無需解碼映像位元組。

//Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
//PDX-License-Identifier: MIT-0 (For details, see https://github.com/awsdocs/amazon-rekognition-developer-guide/blob/master/LICENSE-SAMPLECODE.)

function ProcessImage() {
    AnonLog();
    var control = document.getElementById("fileToUpload");
    var file = control.files[0];

    // Load base64 encoded image for display 
    var reader = new FileReader();
    reader.onload = (function (theFile) {
      return function (e) {
        //Call Rekognition  
        AWS.region = "RegionToUse";  
        var rekognition = new AWS.Rekognition();
        var params = {
          Image: {
          Bytes: e.target.result
        },
        Attributes: [
        'ALL',
      ]
    };
    rekognition.detectFaces(params, function (err, data) {
      if (err) console.log(err, err.stack); // an error occurred
      else {
       var table = "<table><tr><th>Low</th><th>High</th></tr>";
        // show each face and build out estimated age table
        for (var i = 0; i < data.FaceDetails.length; i++) {
          table += '<tr><td>' + data.FaceDetails[i].AgeRange.Low +
            '</td><td>' + data.FaceDetails[i].AgeRange.High + '</td></tr>';
        }
        table += "</table>";
        document.getElementById("opResult").innerHTML = table;
      }
    });

      };
    })(file);
    reader.readAsArrayBuffer(file);
  }

獲取 Amazon Cognito 身分池識別碼

為簡化程序，範例將使用匿名 Amazon Cognito 身分池來提供 Amazon Rekognition Image API 未經授權的存取。這可能符合您的需求。例如，您可以使用未經驗證的存取來提供使用者在註冊前的免費存取或試用存取您的網站。為了提供經驗證的存取，使用 Amazon Cognito 使用者集區。如需詳細資訊，請參閱 Amazon Cognito 使用者集區。

下列程序說明如何建立身分池，以允許存取未經驗證的身分，以及如何取得在範本程式碼中所需的身分池識別碼。

若要取得身分池識別碼

  1. 開啟 Amazon Cognito 主控台。

  2. 選擇 Create new identity pool (建立新的身分池)。

  3. 在 Identity pool name* (身分池名稱*) 中，輸入您的身分池名稱。

  4. 在 Unauthenticated identites (未經驗證的身分) 中，選擇 Enable access to unauthenticated identities (允許存取未經驗證的身分) 。

  5. 選擇 Create Pool (建立集區)。

  6. 選擇 View Details (檢視詳細資訊)，並記下未經驗證的身分之角色名稱。

  7. 選擇 Allow (允許)。

  8. 在 Platform (平台) 中，選擇 JavaScript。

  9. 在 Get AWS Credentials (取得 AWS 憑證) 中，請記下程式碼片段中顯示的 AWS.config.region 和 IdentityPooldId 值。

  10. 在以下網址開啟 IAM 主控台：https://console.aws.amazon.com/iam/。

  11. 在導覽窗格中，選擇角色。

  12. 選擇您在步驟 6 記下的角色名稱。

  13. 在 Permissions (許可) 索引標籤中，選擇 Attach policies (連接政策)。

  14. 選擇 AmazonRekognitionReadOnlyAccess。

  15. 選擇 Attach Policy (連接政策)。