本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用於 JavaScript 以下 JavaScript 網頁範例可讓使用者選擇映像並檢視在映像中偵測到之人臉的估測年齡。估測年齡將由對 [DetectFaces](https://docs.aws.amazon.com/rekognition/latest/APIReference/API_DetectFaces.html) 的呼叫傳回。所選映像已使用 JavaScript `FileReader.readAsDataURL` 函數載入，並以 base64 編碼映像。此步驟對於顯示 HTML 畫布上的映像有幫助。但是，這表示映像位元組需要在傳遞到 Amazon Rekognition Image 操作前解碼。此範例說明如何解碼已載入的映像位元組。如果已編碼的映像位元組對您來說沒有幫助，請改用 `FileReader.readAsArrayBuffer`，因為載入的映像未經過編碼。這表示可以在未先解碼映像位元組的情況下呼叫 Amazon Rekognition Image 操作。如需範例，請參閱 [使用 readAsArrayBuffer](#image-bytes-javascript-unencoded)。 **若要執行 JavaScript 範本** 1. 載入範例原始程式碼到編輯器。 1. 取得 Amazon Cognito 身分池識別碼。如需詳細資訊，請參閱 [獲取 Amazon Cognito 身分池識別碼](#image-bytes-javascript-auth)。 1. 在範本程式碼的 `AnonLog` 函數中，變更 `IdentityPoolIdToUse` 與 `RegionToUse` 為您在 [獲取 Amazon Cognito 身分池識別碼](#image-bytes-javascript-auth) 步驟 9 中記下的值。 1. 在 `DetectFaces` 函數中，變更 `RegionToUse` 為您在之前的步驟中使用的值。 1. 將範例原始程式碼儲存為 `.html` 檔案。 1. 載入檔案到您的瀏覽器。 1. 選擇**瀏覽...** 按鈕，然後選擇其中包含一或多個人臉的映像。將顯示一個資料表，其中包含每個於映像中偵測到的人臉之估測年齡。 **注意** 以下程式碼範例使用不再是 Amazon Cognito 一部分的兩個指令碼。若要取得這些檔案，請按[ aws-cognito-sdk.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.js) 和 [ amazon-cognito-identity.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js) 的連結，將各連結的文字另存為個別的 `.js` 檔案。 ## JavaScript 範本程式碼下列程式碼範例使 JavaScript V2。如需 JavaScript V3 中的範例，請參閱 [AWS 文件開發套件範例 GitHub 儲存庫中的範例。](https://github.com/awsdocs/aws-doc-sdk-examples/tree/master/javascriptv3/example_code/rekognition/estimate-age-example/src) ``` Rekognition

Age Estimator

``` ### 使用 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 = ""; // show each face and build out estimated age table for (var i = 0; i < data.FaceDetails.length; i++) { table += ''; } table += "

Low	High
' + data.FaceDetails[i].AgeRange.Low + '	' + data.FaceDetails[i].AgeRange.High + '

"; document.getElementById("opResult").innerHTML = table; } }); }; })(file); reader.readAsArrayBuffer(file); } ``` ## 獲取 Amazon Cognito 身分池識別碼為簡化程序，範例將使用匿名 Amazon Cognito 身分池來提供 Amazon Rekognition Image API 未經授權的存取。這可能符合您的需求。例如，您可以使用未經驗證的存取來提供使用者在註冊前的免費存取或試用存取您的網站。為了提供經驗證的存取，使用 Amazon Cognito 使用者集區。如需詳細資訊，請參閱 [Amazon Cognito 使用者集區](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html)。下列程序說明如何建立身分池，以允許存取未經驗證的身分，以及如何取得在範本程式碼中所需的身分池識別碼。 **若要取得身分池識別碼** 1. 開啟 Amazon Cognito [主控台](https://console.aws.amazon.com/cognito/federated)。 1. 選擇 **Create new identity pool** (建立新的身分池)。 1. 在 **Identity pool name\$1** (身分池名稱\$1) 中，輸入您的身分池名稱。 1. 在 **Unauthenticated identites (未經驗證的身分)** 中，選擇 **Enable access to unauthenticated identities (允許存取未經驗證的身分)** 。 1. 選擇 **Create Pool** (建立集區)。 1. 選擇 **View Details** (檢視詳細資訊)，並記下未經驗證的身分之角色名稱。 1. 選擇 **Allow** (允許)。 1. 在 **Platform** (平台) 中，選擇 **JavaScript**。 1. 在 **Get AWS Credentials (取得 AWS 憑證)** 中，請記下程式碼片段中顯示的 `AWS.config.region` 和 `IdentityPooldId` 值。 1. 在以下網址開啟 IAM 主控台：[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)。 1. 在導覽窗格中，選擇**角色**。 1. 選擇您在步驟 6 記下的角色名稱。 1. 在 **Permissions (許可)** 索引標籤中，選擇 **Attach policies (連接政策)**。 1. 選擇 **AmazonRekognitionReadOnlyAccess**。 1. 選擇 **Attach Policy (連接政策)**。