0

Microsoft Cognitive Computer Vision API (サムネイル機能) を使用しています。

JavaScript を使用しようとしていますが、応答を理解できません。

JS コードが埋め込まれた HTML ドキュメント全体は次のとおりです。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <button id="btn">Click here</button>
    <p id="response">

    <script type="text/javascript">
        $('#btn').click(function () {
            $.ajax({
                url: "https://api.projectoxford.ai/vision/v1.0/generateThumbnail?width=100&height=100&smartCropping=true",        
                beforeSend: function (xhrObj) {
                    xhrObj.setRequestHeader("Content-Type", "application/json");
                    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "382f5abd65f74494935027f65a41a4bc");
                },
                type: "POST",
                data: '{"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"}'
            })
            .done(function (response) {
                $("#response").text(response);
            })
            .fail(function (error) {
                $("#response").text(error);
            });
        });        
    </script>
</body>
</html>

私が得ている応答は JSON ではないようです。次のようになります。

ここに画像の説明を入力

この API からの応答を処理して、画像要素の src に設定できる base 64 文字列として画像を取得するにはどうすればよいですか。

<base64string>最終的にはこのようなものになりますが、ビットを取得する方法がわかりません。

<img src="data:image/png;base64,<base64string>">

https://dev.projectoxford.ai/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fb/consoleの API テスト コンソールですべてを試しましたが、問題なく動作するようです。

4

2 に答える 2

1

サービスからの応答は、応答ヘッダー「Content-Type: image/jpeg」で示されるバイナリ JPEG イメージです。

これを base64 としてエンコードして表示する方法に関するアドバイスについては、次の関連する回答を参照してください。

于 2016-04-30T17:05:41.167 に答える
1

問題は、jQuery が .done に渡された引数を文字列に変換することだと思います。それを止める方法がわかりません。その文字列をバイナリ オブジェクトに変換して戻すこともできますが、うまくいかないか、jQuery から生の応答を取得する方法を考え出すことができます。

XMLHttpRequest を使用してこれを試しました(これは機能します):

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {

                console.log(this.response, typeof this.response);

                var response = document.querySelector('#response');
                var img = new Image();
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(this.response);
                response.appendChild(img);
              }
            }
            xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/generateThumbnail?width=5&height=5&smartCropping=true');
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader("Ocp-Apim-Subscription-Key", "382f5abd65f74494935027f65a41a4bc");
            xhr.responseType = 'blob';
            xhr.send('{"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"}');

于 2016-05-06T18:47:37.843 に答える