在 JavaScript 中使用计算机视觉缩略图 API 响应数据

Question

我正在使用 Microsoft Cognitive Computer Vision API（缩略图功能）。

我正在尝试使用 JavaScript，但我无法理解响应。

我的整个HTML嵌入JS代码的文档如下：

<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 测试控制台中尝试了一切，似乎工作正常。

Answer 1

来自服务的响应是二进制 JPEG 图像，由响应 header "Content-Type: image/jpeg" 指示。

关于如何将其编码为 base64 并显示它的建议，您可以查看这些相关答案：

Answer 2

我认为问题在于 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"}');

在 JavaScript 中使用计算机视觉缩略图 API 响应数据

Working with Computer Vision Thumbnails API repsonse data in JavaScript

javascript

jquery

microsoft-cognitive