JavaScript 範例程式碼獲取 Amazon Cognito 身分池識別碼

使用 JavaScript

以下 JavaScript 網頁示例允許用戶選擇圖像並查看在圖像中檢測到的臉部的估計年齡。預估的年齡是通過電話返回DetectFaces。

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

若要執行 JavaScript 範例

載入範例原始程式碼到編輯器。
取得 Amazon Cognito 身分池識別碼。如需詳細資訊，請參閱獲取 Amazon Cognito 身分池識別碼。
在範本程式碼的 AnonLog 函數中，變更 IdentityPoolIdToUse 與 RegionToUse 為您在獲取 Amazon Cognito 身分池識別碼步驟 9 中記下的值。
在 DetectFaces 函數中，變更 RegionToUse 為您在之前的步驟中使用的值。
將範例原始程式碼儲存為 .html 檔案。
載入檔案到您的瀏覽器。
選擇瀏覽... 按鈕，然後選擇其中包含一或多個人臉的映像。將顯示一個資料表，其中包含每個於映像中偵測到的人臉之估測年齡。

注意

以下程式碼範例使用不再是 Amazon Cognito 一部分的兩個指令碼。要獲取這些文件，請點擊 .min.js 和 aws-cognito-sdk.min.js 的鏈接，然後將每個文件中的文本保存為單獨的文件 amazon-cognito-identity。 .js

JavaScript 範例程式碼

下列程式碼範例使用 JavaScript V2。如需 JavaScript V3 中的範例，請參閱AWS 文件 SDK 範例 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>

使用 readAsArray緩衝區

下列程式碼片段是使用 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 使用者集區。

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

若要取得身分池識別碼

開啟 Amazon Cognito 主控台。
選擇 Create new identity pool (建立新的身分池)。
在 Identity pool name* (身分池名稱*) 中，輸入您的身分池名稱。
在 Unauthenticated identites (未經驗證的身分) 中，選擇 Enable access to unauthenticated identities (允許存取未經驗證的身分) 。
選擇 Create Pool (建立集區)。
選擇 View Details (檢視詳細資訊)，並記下未經驗證的身分之角色名稱。
選擇 Allow (允許)。
在「平台」中，選擇JavaScript。
在 Get AWS Credentials (取得 AWS 憑證) 中，請記下程式碼片段中顯示的 AWS.config.region 和 IdentityPooldId 值。
在以下網址開啟 IAM 主控台：https://console.aws.amazon.com/iam/。
在導覽窗格中，選擇角色。
選擇您在步驟 6 記下的角色名稱。
在 Permissions (許可) 索引標籤中，選擇 Attach policies (連接政策)。
選擇 [AmazonRekognitionReadOnly存取]。
選擇 Attach Policy (連接政策)。

您的瀏覽器已停用或無法使用 Javascript。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

使用本機檔案系統

顯示週框方塊