エモーションAPI呼出用雛形（HTMLファイル）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<style type="text/css">
<!--
input,textarea,select {
  font-size: 1.4em;
  width:90%;
  height:55%;
}
body {
  font-size: 1em;
  background:azure;
}
-->
</style>

<style>

#tmpa{float: left; width: 40%; height 80%;margin-right: 10px;  padding:20px;border: 3px solid #666;}
#info{float: left; width: 40%; height 80%; padding:20px ;border: 3px solid #666;}button{float:right;padding: 10px 30px;}
hr{border: 2px solid #888;}


@media only screen and (max-width: 900px) {

#tmpa{float: left; width: 80%; margin-right: 10px;  padding:20px;border: 3px solid #666;}
#info{width: 80%; height: 470px;padding:20px ;border: 3px solid #666;}button{float:right;padding: 10px 30px;}
hr{border: 2px solid #888;}

}

</style>

<script type="text/javascript">
    function doDataLink(data) {
        //  alert('dodatalink=>'+data);
        Android.dataLink(data);
    }
</script>

</head>
<body>

<script type="text/javascript">
    $(function() {
        var params = {
            // Request parameters
            "faceRectangles": "{string}",
        };

      var bbb = "{\"url\": \"#x#x#\"}"
      var imx = document.getElementById("tmp");
      var aaa = bbb.replace("#x#x#",imx.src);

        $.ajax({
            url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","d4eab8baf220490aa8797de1753400ca");
            },
            type: "POST",
            // Request body
            data: aaa,
        })
        .done(function(data) {
//            alert("success");
//            console.log('怒り＝＝＞'+data[0].scores.anger);
//            console.log('軽蔑＝＝＞'+data[0].scores.contempt);
//            console.log('嫌悪＝＝＞'+data[0].scores.disgust);
//            console.log('怖れ＝＝＞'+data[0].scores.fear);
//            console.log('幸福＝＝＞'+data[0].scores.happiness);
//            console.log('普通＝＝＞'+data[0].scores.neutral);
//            console.log('悲み＝＝＞'+data[0].scores.sadness);
//            console.log('驚き＝＝＞'+data[0].scores.surprise);

            alert('判定完了\n怒り＝＝＞'+data[0].scores.anger+'\n'
            +'軽蔑＝＝＞'+data[0].scores.contempt+'\n'
            +'嫌悪＝＝＞'+data[0].scores.disgust+'\n'
            +'怖れ＝＝＞'+data[0].scores.fear+'\n'
            +'幸福＝＝＞'+data[0].scores.happiness+'\n'
            +'普通＝＝＞'+data[0].scores.neutral+'\n'
            +'悲み＝＝＞'+data[0].scores.sadness+'\n'
            +'驚き＝＝＞'+data[0].scores.surprise+'\n');

            var inx = document.getElementById("info");

            var ccc='感情判定完了<br><br>怒り＝＝＞'+data[0].scores.anger+'<br>'
            +'軽蔑＝＝＞'+data[0].scores.contempt+'<br>'
            +'嫌悪＝＝＞'+data[0].scores.disgust+'<br>'
            +'怖れ＝＝＞'+data[0].scores.fear+'<br>'
            +'幸福＝＝＞'+data[0].scores.happiness+'<br>'
            +'普通＝＝＞'+data[0].scores.neutral+'<br>'
            +'悲み＝＝＞'+data[0].scores.sadness+'<br>'
            +'驚き＝＝＞'+data[0].scores.surprise+'<br>';


            inx.innerHTML = ccc;

            var ddd=data[0].scores.anger+'@x@'
            +data[0].scores.contempt+'@x@'
            +data[0].scores.disgust+'@x@'
            +data[0].scores.fear+'@x@'
            +data[0].scores.happiness+'@x@'
            +data[0].scores.neutral+'@x@'
            +data[0].scores.sadness+'@x@'
            +data[0].scores.surprise+'@x@';

            doDataLink(ddd);

        })
        .fail(function() {
            alert("error");
            doDataLink('//e//');
        });
    });
</script>


<div id="tmpa"><img id="tmp" src="https://i.embed.ly/1/display/resize?key=5230dd43a2a24dbfa00e59ddfab27c63&width=400&height=400&url=@@@1@@@"></div>
<div id="info">この写真の感情を判定します。<div>
</body>
</html>