

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Usando JavaScript
<a name="image-bytes-javascript"></a>

O exemplo de JavaScript página da web a seguir permite que um usuário escolha uma imagem e visualize a idade estimada dos rostos detectados na imagem. As idades estimativas são retornadas por uma chamada à [DetectFaces](https://docs.aws.amazon.com/rekognition/latest/APIReference/API_DetectFaces.html). 

A imagem escolhida é carregada usando a JavaScript `FileReader.readAsDataURL` função, que codifica a imagem em base64. Isso é útil para exibir a imagem em uma tela HTML. Porém, isso significa que os bytes da imagem precisam ser descodificados antes de serem passados para uma operação do Amazon Rekognition Image. Este exemplo mostra como decodificar os bytes da imagem carregada. Se os bytes da imagem codificada não forem úteis para você, use `FileReader.readAsArrayBuffer` no lugar, porque a imagem carregada não está codificada. Isso significa que as operações do Amazon Rekognition Image podem ser chamadas sem primeiro descodificar os bytes da imagem. Para ver um exemplo, consulte [Usando o readAsArray Buffer](#image-bytes-javascript-unencoded).

**Para executar o JavaScript exemplo**

1. Carregue o código-fonte de exemplo em um editor.

1. Selecione o banco de identidades de identidade do Amazon Cognito. Para obter mais informações, consulte [Selecione o banco de identidades do Amazon Cognito.](#image-bytes-javascript-auth).

1. Na função `AnonLog` do código de exemplo, altere `IdentityPoolIdToUse` e `RegionToUse` para os valores que você anotou na etapa 9 de [Selecione o banco de identidades do Amazon Cognito.](#image-bytes-javascript-auth). 

1. Na função `DetectFaces`, altere `RegionToUse` para o valor que você usou na etapa anterior.

1. Salve o código fonte de exemplo como um arquivo `.html`.

1. Carregue o arquivo em seu navegador.

1. Escolha o botão **Procurar...** e escolha uma imagem que contenha uma ou mais faces. Uma tabela é mostrada contendo as idades estimadas de cada face detectada na imagem. 

**nota**  
O exemplo de código a seguir usa dois scripts que não fazem mais parte do Amazon Cognito. [Para obter esses arquivos, siga os links para [ aws-cognito-sdk.min.js e .min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.js) e amazon-cognito-identity salve o texto de cada um como arquivos separados.](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js) `.js` 

## JavaScript código de exemplo
<a name="image-bytes-javascript-code"></a>

O exemplo de código a seguir usa JavaScript V2. Para ver um exemplo na JavaScript V3, consulte [o exemplo no repositório de exemplos GitHub do SDK de AWS documentação](https://github.com/awsdocs/aws-doc-sdk-examples/tree/master/javascriptv3/example_code/rekognition/estimate-age-example/src).

```
<!--
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>
```

### Usando o readAsArray Buffer
<a name="image-bytes-javascript-unencoded"></a>

O trecho de código a seguir é uma implementação alternativa da `ProcessImage` função no código de amostra, usando JavaScript V2. Ele usa `readAsArrayBuffer` para carregar uma imagem e chamar `DetectFaces`. Como `readAsArrayBuffer` não codifica o arquivo carregado em base64, não é necessário decodificar os bytes da imagem antes de chamar uma operação do 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);
  }
```

## Selecione o banco de identidades do Amazon Cognito.
<a name="image-bytes-javascript-auth"></a>

Para simplificar, o exemplo usa um banco de identidades anônimo do Amazon Cognito para fornecer acesso não autenticado à API Amazon Rekognition Image. Isso pode ser adequado para suas necessidades. Por exemplo, você pode usar o acesso não autenticado para fornecer acesso gratuito ou avaliação gratuita a seu site antes de os usuários se cadastrarem. Para fornecer acesso autenticado, use um grupo de usuários do Amazon Cognito. Para obter mais informações, consulte [grupo de usuários do Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html). 

O procedimento a seguir mostra como criar um grupo de identidades que permite acesso a identidades não autenticadas e como obter o identificador do grupo de identidades que é necessário no código de exemplo.

**Para obter o identificador do grupo de identidades**

1. Abra o [console do Amazon Cognito](https://console.aws.amazon.com/cognito/federated).

1. Escolha **Criar novo banco de identidades**.

1. Em **Identity pool name\$1** (Nome do grupo de identidades), digite um nome para o grupo de identidades.

1. Em **Unauthenticated identities (Identidades não autenticadas)**, escolha **Enable access to unauthenticated identities (Permitir acesso a identidades não autenticadas)**.

1. Selecione **Criar grupo**.

1. Escolha **View Details** (Visualizar detalhes) e anote o nome da função para identidades não autenticadas.

1. Selecione **Permitir**.

1. Em **Plataforma**, escolha **JavaScript**.

1. Em **Get AWS Credentials (Obter credenciais da AWS)**, anote os valores de `AWS.config.region` e `IdentityPooldId` que são mostrados no trecho de código.

1. Abra o console do IAM em [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/).

1. No painel de navegação, escolha **Perfis**.

1. Escolha o nome da função que você anotou na etapa 6.

1. Na guia **Permissions (Permissões)**, escolha **Attach policies (Anexar políticas)**.

1. Selecione **AmazonRekognitionReadOnlyAccess**.

1. Escolha **Attach Policy**.