

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

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

Il seguente esempio di JavaScript pagina Web consente a un utente di scegliere un'immagine e visualizzare le età stimate dei volti rilevati nell'immagine. Le età stimate vengono restituite da una chiamata a [DetectFaces](https://docs.aws.amazon.com/rekognition/latest/APIReference/API_DetectFaces.html). 

L'immagine scelta viene caricata utilizzando la JavaScript `FileReader.readAsDataURL` funzione, che codifica l'immagine in base64. Questo è utile per visualizzare l'immagine su un canvas HTML. Significa però che i byte dell'immagine non devono essere codificati prima di essere passati a un'operazione Immagini Amazon Rekognition. Questo esempio illustra come non codificare i byte dell'immagine caricata. Se i byte dell'immagine codificata non sono utili, utilizza `FileReader.readAsArrayBuffer` perché l'immagine caricata non è codificata. Ciò significa che le operazioni Immagini Amazon Rekognition possono essere chiamate senza prima decodificare i byte dell'immagine. Per vedere un esempio, consulta [Utilizzo di readAsArray Buffer](#image-bytes-javascript-unencoded).

**Per eseguire l'esempio JavaScript**

1. Carica il codice sorgente dell'esempio in un editor.

1. Scarica l'identificatore Amazon Cognito del pool di identità. Per ulteriori informazioni, consulta [Scarica l'identificatore Amazon Cognito del pool di identità](#image-bytes-javascript-auth).

1. Nella funzione `AnonLog` del codice di esempio, modifica `IdentityPoolIdToUse` e `RegionToUse` nei valori indicati nella fase 9 di [Scarica l'identificatore Amazon Cognito del pool di identità](#image-bytes-javascript-auth). 

1. Nella funzione `DetectFaces`, modifica `RegionToUse` con il valore utilizzato nella fase precedente.

1. Salva il codice sorgente di esempio come un file `.html`.

1. Carica il file nel tuo browser.

1. Seleziona il pulsante **Cerca…**, quindi scegli un'immagine che contenga uno o più volti. Viene visualizzata una tabella che contiene le età stimate per ogni faccia rilevata nell'immagine. 

**Nota**  
L'esempio di codice seguente utilizza due script che non fanno più parte di Amazon Cognito. Per ottenere questi file, segui i collegamenti per [ aws-cognito-sdk.min.js e [ amazon-cognito-identity.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js)](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.js), quindi salva il testo di ciascuno di essi come file separati. `.js` 

## JavaScript codice di esempio
<a name="image-bytes-javascript-code"></a>

Il seguente esempio di codice utilizza JavaScript V2. Per un esempio in JavaScript V3, vedi [l'esempio nel repository degli esempi di AWS Documentation SDK](https://github.com/awsdocs/aws-doc-sdk-examples/tree/master/javascriptv3/example_code/rekognition/estimate-age-example/src). 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>
```

### Utilizzo di readAsArray Buffer
<a name="image-bytes-javascript-unencoded"></a>

Il seguente frammento di codice è un'implementazione alternativa della `ProcessImage` funzione nel codice di esempio, utilizzando V2. JavaScript Viene utilizzato `readAsArrayBuffer` per caricare un'immagine ed effettuare la chiamata a `DetectFaces`. Poiché `readAsArrayBuffer` non utilizza la codifica Base64 per il file caricato, non è necessario decodificare i byte dell'immagine prima di chiamare un'operazione Immagini Amazon Rekognition.

```
//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);
  }
```

## Scarica l'identificatore Amazon Cognito del pool di identità
<a name="image-bytes-javascript-auth"></a>

Per semplicità, l'esempio utilizza un pool di identità Amazon Cognito anonimo per fornire un accesso non autenticato all'API Immagini Amazon Rekognition. Questo potrebbe essere idoneo per le tue esigenze. Ad esempio, puoi utilizzare l'accesso non autenticato per fornire il periodo di prova o l'accesso gratuito a un sito Web, prima che gli utenti effettuino la registrazione. Per fornire l'accesso autenticato, utilizza un pool di utenti Amazon Cognito. Per ulteriori informazioni, consulta [il pool di utenti Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html). 

La procedura seguente mostra come creare un pool di identità che consente l'accesso a identità non autenticate e ottenere l'identificatore del pool di identità necessario per il codice di esempio.

**Per scaricare l'identificatore del pool di identità**

1. Apri la [console Amazon Cognito](https://console.aws.amazon.com/cognito/federated).

1. Scegli **Create new identity pool** (Crea un nuovo pool di identità).

1. Digita un nome per il tuo pool di identità in **Identity pool name\$1** (Nome pool di identità).

1. In **Unauthenticated identites (Identità non autenticate)**, seleziona **Enable access to unauthenticated identities (Abilita l'accesso a identità non autenticate)**.

1. Seleziona **Create Pool** (Crea pool).

1. Scegli **View Details** (Visualizza dettagli) e annota il nome del ruolo per le identità non autenticate.

1. Scegli **Permetti**.

1. In **Piattaforma, scegli**. **JavaScript**

1. In **Ottieni credenziali AWS**, prendere nota dei valori di `AWS.config.region` e `IdentityPooldId` che sono visualizzati nello snippet di codice.

1. Aprire la console IAM all'indirizzo [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/).

1. Nel riquadro di navigazione, seleziona **Ruoli**.

1. Scegli il nome del ruolo annotato nella fase 6.

1. Nella scheda **Permissions (Autorizzazioni)**, scegliere **Attach policies (Collega policy)**.

1. Scegli **AmazonRekognitionReadOnlyAccess**.

1. Scegli **Attach Policy (Collega policy)**.