翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
の使用 JavaScript
次の JavaScript ウェブページの例では、ユーザーがイメージを選択し、イメージ内で検出された顔の推定年齢を表示できます。推定年齢は DetectFaces を呼び出すことで返されます。
選択したイメージは、イメージを JavaScript base64 でエンコードする FileReader.readAsDataURL
関数を使用してロードされます。これは、HTML キャンバスでイメージを表示するのに役立ちます。ただし、イメージバイトを Amazon Rekognition Image オペレーションに渡す前にエンコードされていない状態にする必要があります。この例では、ロードされたイメージバイトをエンコードされていない状態にする方法を示しています。エンコードされたイメージバイトが有用でない場合は、代わりにロードされたイメージがエンコードされない FileReader.readAsArrayBuffer
を使用します。つまり、最初にイメージバイトをエンコードされていない状態にする処理なしで、Amazon Rekognition Image オペレーションを呼び出すことができます。例については「 readAsArrayBuffer の使用」を参照してください。
JavaScript サンプルを実行するには
ソースコード例をエディタにロードします。
Amazon Cognito identity プールの識別子を取得します。詳細については、「Amazon Cognito identity プールの識別を取得します。」を参照してください。
コード例の
AnonLog
関数で、IdentityPoolIdToUse
とRegionToUse
は「Amazon Cognito identity プールの識別を取得します。」のステップ 9 で書き留めた値に変更します。DetectFaces
関数のRegionToUse
を、前のステップで使用した値に変更します。ソースコード例を
.html
ファイルとして保存します。ブラウザにファイルをロードします。
[参照...] ボタンを選択して、1 つ以上の顔が含まれたイメージを選択します。イメージ内で検出された顔ごとの推定年齢が含まれたテーブルが表示されます。
注記
以下のコード例では、Amazon Cognito に含まれなくなった 2 つのスクリプトを使用しています。これらのファイルを取得するには、 aws-cognito-sdk.min.js.js
ファイルとして保存します。
JavaScript サンプルコード
次のコード例では JavaScript V2 を使用しています。 JavaScript V3 の例については、 AWSドキュメント SDK サンプル 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>
readAsArrayBuffer の使用
次のコードスニペットは、 JavaScript V2 を使用したサンプルコード内の ProcessImage
関数の代替実装です。readAsArrayBuffer
を使用してイメージを読み込み、DetectFaces
を呼び出します。ロードしたファイルは readAsArrayBuffer
で base64 エンコードされないため、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); }
Amazon Cognito identity プールの識別を取得します。
わかりやすいように、この例では、匿名の Amazon Cognito identity プールを使用して、 Amazon Rekognition Image API に認証されていないアクセスを提供します。これは、お客様のニーズに適している場合もあります。たとえば、認証されていないアクセスを使用して、ユーザーがサインアップする前に、無料または試用でウェブサイトにアクセスできるようにできます。認証されたアクセスを提供するには、Amazon Cognito ユーザープールを使用します。詳細については、Amazon Cognito ID ユーザープール を参照してください。
以下の手順では、認証されていない ID へのアクセスを有効にする ID プールを作成する方法と、コード例で必要な ID プールの ID を取得する方法を説明します。
ID プールの ID を取得するには
Amazon Cognito コンソール
を開きます。 [Create new identity pool] を選択します。
[ID プール名*] に ID プールの名前を入力します。
[認証されていない ID] で、[認証されていない ID に対してアクセスを有効にする] を選択します。
[プールの作成] を選択します。
[詳細の表示] を選択して、認証されていない ID のロール名をメモします。
[Allow] (許可) を選択します。
プラットフォーム で、 を選択しますJavaScript。
[AWS 認証情報の取得] で、コードスニペットに表示される
AWS.config.region
とIdentityPooldId
の値をメモします。IAM コンソール (https://console.aws.amazon.com/iam/
) を開きます。 ナビゲーションペインで Roles (ロール) を選択します。
ステップ 6 で書き留めたロール名を選択します。
[アクセス許可] タブで、[ポリシーのアタッチ] を選択します。
を選択しますAmazonRekognitionReadOnlyAccess。
[ポリシーをアタッチ] を選択します。