Azure Face APIを使って顔分析Web Appを作る #JavaScript

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Face API Web App Sample</title>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
  <div class="container" id="container">
    <h2>Face APIによる顔分析</h2>
    <div id="message"></div>
    <div id="Smilescore"></div>
    <div id="content">
      <p><input id="fileToUpload" name="upload" type="file"></p>
      <textarea id="responseTextArea" class="UIInput" style="width:100%; height:600px;"></textarea>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js">
  </script> 
  <script src="face.js"></script>
</body>
</html>

face.js

var html = '';

$(function() {

    $('input[type=file]').after('<span id=\"image\"><\/span>');

    $('input[type=file]').change(function() {

        var subscriptionKey = "サブスクリプションID";

        var uriBase = "https://japaneast.api.cognitive.microsoft.com/face/v1.0/detect";

        var params = {
            "returnFaceId": "true",
            "returnFaceLandmarks": "false",
            "returnFaceAttributes": "age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise",
        };

        var file = $(this).prop('files')[0];

        if (!file.type.match('image.*')) {
        $(this).val('');
        $('span').html('');
        return;
        }

        var reader = new FileReader();

        reader.onload = function() {
        var img_src = $('<br><img height=\"300\">').attr('src', reader.result);
        $('span').html(img_src);
        }
        reader.readAsDataURL(file);

        $.ajax({
            url: uriBase + "?" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/octet-stream");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key",subscriptionKey);
            },
            type: "POST",
            data: file,
            processData: false,
        })
        .done(function(data) {
            var Smilescore = data["0"].faceAttributes.smile;
            console.log(Smilescore);
            var inputid = document.getElementById("Smilescore")
            inputid.innerHTML = "Smile Score=" + Smilescore;

        $("#responseTextArea").val(JSON.stringify(data, null, 2));

    })
    .fail(function() {
        alert("error");
    });
    });
});