JavaScript código de ejemplo Obtener el identificador de grupo de identidades de Amazon Cognito

Usando JavaScript

El siguiente ejemplo de JavaScript página web permite al usuario elegir una imagen y ver las edades estimadas de los rostros que se detectan en la imagen. Las edades estimadas se devuelven mediante una llamada a DetectFaces.

La imagen elegida se carga mediante la JavaScript FileReader.readAsDataURL función, que codifica la imagen en base64. Esto resulta útil para mostrar la imagen en un lienzo HTML. Pero implica que los bytes de imagen se tienen que descodificar antes de transferirlos a una operación de Amazon Rekognition Image. En este ejemplo se muestra cómo descodificar los bytes de imagen subidos. Si los bytes de imagen codificados no le resultan útiles, use FileReader.readAsArrayBuffer en su lugar porque la imagen subida no está codificada. Esto significa que se puede llamar a las operaciones de Amazon Rekognition Image sin codificar primero los bytes de imagen. Para ver un ejemplo, consulte Uso de Buffer readAsArray.

Para ejecutar el ejemplo JavaScript

Cargue el código fuente de ejemplo en un editor.
Obtenga el identificador de grupo de identidades de Amazon Cognito. Para obtener más información, consulte Obtener el identificador de grupo de identidades de Amazon Cognito.
En la función AnonLog del código de ejemplo, cambie IdentityPoolIdToUse y RegionToUse por los valores que anotó en el paso 9 de Obtener el identificador de grupo de identidades de Amazon Cognito.
En la función DetectFaces, cambie RegionToUse por el valor que usó en el paso anterior.
Guarde el código fuente de ejemplo como un archivo .html.
Cargue el archivo en su navegador.
Haga clic en el botón Examinar... y elija una imagen que contenga una o más caras. Se muestra una tabla que contiene las edades estimadas para cada rostro detectado en la imagen.

nota

El siguiente ejemplo de código utiliza dos scripts que ya no forman parte de Amazon Cognito. Para obtener estos archivos, siga los enlaces para aws-cognito-sdk.min.js y .min.js y amazon-cognito-identity, a continuación, guarde el texto de cada uno como archivos separados. .js

JavaScript código de ejemplo

El siguiente ejemplo de código usa JavaScript V2. Para ver un ejemplo de la JavaScript versión 3, consulte el ejemplo en el GitHub repositorio de ejemplos del SDK de AWS documentación.


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

Uso de Buffer readAsArray

El siguiente fragmento de código es una implementación alternativa de la ProcessImage función en el código de ejemplo, utilizando JavaScript V2. Utiliza readAsArrayBuffer para subir una imagen y llama a DetectFaces. Dado que readAsArrayBuffer no codifica en base64 el archivo subido, no es necesario descodificar los bytes de imagen antes de llamar a una operación de 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);
  }

Obtener el identificador de grupo de identidades de Amazon Cognito

Para simplificar, el ejemplo utiliza un grupo de identidades de Amazon Cognito anónimas para proporcionar acceso sin autenticar a la API de Amazon Rekognition Image. Esto podría ser adecuado para sus necesidades. Por ejemplo, puede utilizar el acceso sin autenticar para proporcionar acceso gratuito, o de prueba, a su sitio web antes de que los usuarios se inscriban. Para proporcionar acceso autenticado, utilice un grupo de usuarios de Amazon Cognito. Para obtener más información, consulte Grupos de usuarios de Amazon Cognito.

En el siguiente procedimiento se muestra cómo crear un grupo de identidades que permite el acceso a identidades sin autenticar y cómo obtener el identificador de grupo de identidades que se necesita en el código de ejemplo.

Para obtener el identificador de grupo de identidades

Abra la consola de Amazon Cognito.
Elija Crear nuevo grupo de identidades.
En Nombre de grupo de identidades*, escriba un nombre para su grupo de identidades.
En Identidades sin autenticar, elija Habilitar el acceso a identidades sin autenticar.
Elija Crear grupo.
Elija Ver detalles y anote el nombre de rol de las identidades sin autenticar.
Elija Permitir.
En Plataforma, elija. JavaScript
En Obtener credenciales de AWS, anote los valores de AWS.config.region y IdentityPooldId que se muestran en el fragmento de código.
Abra la consola de IAM en https://console.aws.amazon.com/iam/.
Seleccione Roles en el panel de navegación.
Elija el nombre de rol que anotó en el paso 6.
En la pestaña Permisos, elija Asociar políticas.
Selecciona AmazonRekognitionReadOnlyAcceso.
Elija Adjuntar política.

Aviso JavaScript está desactivado o no está disponible en su navegador.

Para utilizar la documentación de AWS, debe estar habilitado JavaScript. Para obtener más información, consulte las páginas de ayuda de su navegador.

Convenciones del documento

Uso de un sistema de archivos local

Visualización de cuadros delimitadores