JavaScript Beispielcode Abrufen der Amazon-Cognito-Identitätspool-ID

Verwenden JavaScript

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. Das geschätzte Alter wird durch einen Anruf an zurückgegeben DetectFaces.

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.

Um das Beispiel auszuführen JavaScript

Laden Sie den Beispielquellcode in einen Editor.
Rufen Sie die Amazon-Cognito-Identitätspool-ID ab. Weitere Informationen finden Sie unter Abrufen der Amazon-Cognito-Identitätspool-ID.
Ä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 notiert haben.
Ändern Sie in der Funktion DetectFaces RegionToUse in den im vorigen Schritt verwendeten Wert.
Speichern Sie den Beispielquellcode als .html-Datei.
Laden Sie die Datei in Ihren Browser.
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 und amazon-cognito-identity.min.js und speichern Sie dann den Text aus jeder Datei als separate .js Dateien.

JavaScript Beispielcode

Das folgende Codebeispiel verwendet JavaScript V2. Ein Beispiel für JavaScript V3 finden Sie in dem Beispiel im AWS Documentation SDK Examples GitHub Repository.


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

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

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.

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

Öffnen Sie die Amazon-Cognito-Konsole.
Wählen Sie Neuen Identitätspool erstellen.
Geben Sie für Identitätspoolname* einen Namen für Ihren Identitätspool ein.
Wählen Sie in Nicht authentifizierte Identitäten die Option Zugriff auf nicht authentifizierte Identitäten aktivieren.
Wählen Sie Pool erstellen.
Wählen Sie Details anzeigen und notieren Sie den Rollennamen für nicht authentifizierte Identitäten.
Wählen Sie Zulassen.
Wählen Sie unter Plattform die Option. JavaScript
Notieren Sie in AWS-Anmeldeinformationen abrufen die Werte von AWS.config.region und IdentityPooldId, die im Codeabschnitt angezeigt werden.
Öffnen Sie die IAM-Konsole unter https://console.aws.amazon.com/iam/.
Wählen Sie im Navigationsbereich Rollen aus.
Wählen Sie den Rollennamen, den Sie in Schritt 6 notiert haben.
Wählen Sie in der Registerkarte Berechtigungen die Option Richtlinien anfügen aus.
Wählen Sie AmazonRekognitionReadOnlyAccess aus.
Wählen Sie Richtlinie anfügen aus.

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

Verwenden eines lokalen Dateisystems

Anzeigen von Begrenzungsrahmen