기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# JavaScript 사용
다음 JavaScript 웹 페이지 예제를 이용하여 이미지를 선택하고, 이미지에서 감지된 얼굴의 예상 연령을 확인할 수 있습니다. [DetectFaces](https://docs.aws.amazon.com/rekognition/latest/APIReference/API_DetectFaces.html)를 직접 호출하면 추정 연령이 반환됩니다.
선택한 이미지는, 이미지를 base64로 인코딩하는 JavaScript `FileReader.readAsDataURL` 함수를 사용하여 로드됩니다. 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 설명서 SDK 예제 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 = "
Low
High
";
// show each face and build out estimated age table
for (var i = 0; i < data.FaceDetails.length; i++) {
table += '
' + data.FaceDetails[i].AgeRange.Low +
'
' + data.FaceDetails[i].AgeRange.High + '
';
}
table += "
";
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. **새 자격 증명 풀 생성**을 선택합니다.
1. **자격 증명 풀 이름\$1**에 자격 증명 풀의 이름을 입력합니다.
1. **인증되지 않은 자격 증명**에서 **인증되지 않은 자격 증명에 대한 액세스 활성화**를 선택합니다.
1. **풀 생성**을 선택합니다.
1. **세부 정보 보기**를 선택하고 인증되지 않은 자격 증명의 역할 이름을 적어 둡니다.
1. **허용**을 선택합니다.
1. **플랫폼**에서 **JavaScript**를 선택합니다.
1. **AWS 자격 증명 얻기**에서 코드 조각에 표시된 `AWS.config.region` 및 `IdentityPooldId`의 값을 적어 둡니다.
1. IAM 콘솔([https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/))을 엽니다.
1. 탐색 창에서 **역할**을 선택합니다.
1. 6단계에서 적어 둔 역할 이름을 선택합니다.
1. **권한** 탭에서 **정책 연결**을 선택합니다.
1. **AmazonRekognitionReadOnlyAccess**를 선택합니다.
1. **정책 연결**을 선택합니다.