

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

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

Das folgende JavaScript Webseitenbeispiel ermöglicht es einem Benutzer, ein Bild auszuwählen und sich das geschätzte Alter der Gesichter anzusehen, die auf dem Bild erkannt wurden. Die geschätzten Altersgruppen werden über einen Aufruf von [DetectFaces](https://docs.aws.amazon.com/rekognition/latest/APIReference/API_DetectFaces.html) zurückgegeben. 

Das gewählte Bild wird mithilfe der JavaScript `FileReader.readAsDataURL` Funktion geladen, die das Bild base64-kodiert. Dies ist nützlich, um das Bild auf einer HTML-Zeichenfläche anzuzeigen. Es bedeutet jedoch, dass die Bild-Bytes in ein nicht codiertes Format umgewandelt werden müssen, bevor sie einer Amazon-Rekognition-Image-Operation übergeben werden. In diesem Beispiel wird gezeigt, wie Sie die geladenen Bildbytes entcodieren. Wenn die entcodierten Bild-Bytes nicht nützlich für Sie sind, verwenden Sie stattdessen `FileReader.readAsArrayBuffer`, da das geladenen Bild nicht kodiert ist. Das bedeutet, dass Amazon-Rekognition-Image-Operationen aufgerufen werden können, ohne dass die Bild-Bytes zuvor in ein nicht codiertes Format umgewandelt werden müssen. Ein Beispiel finden Sie unter [readAsArrayBuffer verwenden](#image-bytes-javascript-unencoded).

**Um das Beispiel auszuführen JavaScript**

1. Laden Sie den Beispielquellcode in einen Editor.

1. Rufen Sie die Amazon-Cognito-Identitätspool-ID ab. Weitere Informationen finden Sie unter [Abrufen der Amazon-Cognito-Identitätspool-ID](#image-bytes-javascript-auth).

1. Ändern Sie in der `AnonLog`-Funktion des Beispielcodes `IdentityPoolIdToUse` und `RegionToUse` in die Werte, die Sie in Schritt 9 von [Abrufen der Amazon-Cognito-Identitätspool-ID](#image-bytes-javascript-auth) notiert haben. 

1. Ändern Sie in der Funktion `DetectFaces` `RegionToUse` in den im vorigen Schritt verwendeten Wert.

1. Speichern Sie den Beispielquellcode als `.html`-Datei.

1. Laden Sie die Datei in Ihren Browser.

1. Wählen Sie die Schaltfläche **Durchsuchen...** und wählen Sie ein Bild aus, das ein oder mehrere Gesichter enthält. Eine Tabelle wird mit den geschätzten Altersgruppen für jedes im Bild erkannt Gesicht wird angezeigt. 

**Anmerkung**  
Im folgenden Codebeispiel werden zwei Skripts verwendet, die nicht mehr Teil von Amazon Cognito sind. Um diese Dateien abzurufen, folgen Sie den Links für [ aws-cognito-sdk.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.js) und [ amazon-cognito-identity.min.js](https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js) und speichern Sie dann den Text aus jeder Datei als separate `.js` Dateien. 

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

Das folgende Codebeispiel verwendet JavaScript V2. Ein Beispiel für JavaScript V3 finden Sie in [dem Beispiel im AWS Documentation SDK Examples GitHub Repository.](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>
```

### readAsArrayBuffer verwenden
<a name="image-bytes-javascript-unencoded"></a>

Der folgende Codeausschnitt ist eine alternative Implementierung der `ProcessImage` Funktion im Beispielcode unter Verwendung JavaScript von V2. Es verwendet `readAsArrayBuffer`, um ein Bild zu laden und `DetectFaces` aufzurufen. Da `readAsArrayBuffer` die Datei nicht mit base64 codiert, ist es nicht notwendig, die Bild-Bytes zu entcodieren, bevor eine Amazon-Rekognition-Image-Operation aufgerufen wird.

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

## Abrufen der Amazon-Cognito-Identitätspool-ID
<a name="image-bytes-javascript-auth"></a>

Der Einfachheit halber wird in diesem Beispiel ein anonymer Amazon-Cognito-Identitätspool verwendet, um einen nicht authentifizierten Zugriff auf die Amazon-Rekognition-Image-API zu ermöglichen. Dies könnte für Ihre Anforderungen nützlich sein. Sie können den nicht authentifizierten Zugriff beispielsweise verwenden, um kostenlosen Zugriff auf Ihre Website oder einen Testzugang zu bieten, bevor sich Benutzer anmelden. Um authentifizierten Zugriff bereitzustellen, verwenden Sie einen Amazon-Cognito-Benutzerpool. Weitere Informationen finden Sie unter [Amazon-Cognito-Benutzerpool](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html). 

Das folgende Verfahren zeigt, wie Sie einen Identitätspool erstellen, der den Zugriff auf nicht authentifizierte Identitäten ermöglicht, und wie Sie die Identitätspool-ID abrufen, die im Beispielcode benötigt wird.

**Abrufen der Identitätspool-ID**

1. Öffnen Sie die [Amazon-Cognito-Konsole](https://console.aws.amazon.com/cognito/federated).

1. Wählen Sie **Neuen Identitätspool erstellen**.

1. Geben Sie für **Identitätspoolname\$1** einen Namen für Ihren Identitätspool ein.

1. Wählen Sie in **Nicht authentifizierte Identitäten** die Option **Zugriff auf nicht authentifizierte Identitäten aktivieren**.

1. Wählen Sie **Pool erstellen**.

1. Wählen Sie **Details anzeigen** und notieren Sie den Rollennamen für nicht authentifizierte Identitäten.

1. Wählen Sie **Zulassen**.

1. Wählen Sie unter **Plattform die** Option. **JavaScript**

1. Notieren Sie in **AWS-Anmeldeinformationen abrufen** die Werte von `AWS.config.region` und `IdentityPooldId`, die im Codeabschnitt angezeigt werden.

1. Öffnen Sie unter [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) die IAM-Konsole.

1. Wählen Sie im Navigationsbereich **Rollen** aus.

1. Wählen Sie den Rollennamen, den Sie in Schritt 6 notiert haben.

1. Wählen Sie in der Registerkarte **Berechtigungen** die Option **Richtlinien anfügen** aus.

1. Wählen Sie **AmazonRekognitionReadOnlyAccess**.

1. Wählen Sie **Richtlinie anfügen** aus.