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 的响应，以便将图像作为 base 64 字符串获取，我可以将其设置为图像元素上的 src。

它最终会变成这样，但我不知道如何得到它<base64string>。

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

我已经在https://dev.projectoxford.ai/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fb/console的 api 测试控制台中尝试了一切，它似乎工作正常。

4

2 回答 2

1

来自服务的响应是二进制 JPEG 图像，由响应标头“Content-Type: image/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 回答