0

Project Oxford の Emotion API を自分の Web サイトに実装できるようにしたいと考えています。私は現在、URL から画像をチェックし、Emotion API を実行した後にその画像の結果を表示する以下の HTML/JavaScript コードを作成しました。

<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(function() {
  $.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", "my-key");
      },
      type: "POST",
      // Request body
      data: '{"url": "https://philosophybank.files.wordpress.com/2013/08/happy-people.jpg"}',
    })
    .done(function(data) {
    JSON.stringify(data);
      alert(JSON.stringify(data));
      //console.log(data);
      //alert(data.scores);
    })
    .fail(function(error) {
      console.log(error.getAllResponseHeaders());

      alert("fail");
    });
});

</script>

このコードは正常に動作しますが、リンクを使用して画像を検索するのではなく、参照ボタンを使用してマシンからローカルに画像をアップロードできるように、これを私の Web サイトに実装しようと考えています。どんな助けでも大歓迎です！

4

1 に答える 1

3

application/octet-streamイメージへの URL ではなく、バイナリ オブジェクト (つまり、イメージ自体) を投稿できるボディ タイプとして使用して、これをモックアップしました。Emotion APIのドキュメントでは、これがどのようにサポートされているコンテンツ タイプであるかについて詳しく説明しています。

元の例に従って、JQueryの使用を続けました。

この例全体をコピーして HTML ファイルに貼り付け、記載されている場所に Emotion API キーを追加すると、機能するはずですmy-key。

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" name="filename">
    <button id="btn">Click here</button>

    <script type="text/javascript">
        $('#btn').click(function () {

            var file = document.getElementById('file').files[0];

            $.ajax({
                    url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
                    beforeSend: function(xhrObj) {
                        // Request headers
                        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
                    },
                    type: "POST",
                    data: file,
                    processData: false
                })
                .done(function(data) {
                    JSON.stringify(data);
                    alert(JSON.stringify(data));
                })
                .fail(function(error) {
                    alert(error.getAllResponseHeaders());
                });
        });
    </script>
</body>

</html>
于 2016-02-25T13:36:07.300 に答える