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

【问题标题】：Working with Computer Vision Thumbnails API repsonse data in JavaScript在 JavaScript 中使用计算机视觉缩略图 API 响应数据
【发布时间】：2016-05-07 02:47:37
【问题描述】：

我正在使用 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 测试控制台中尝试了所有方法，它似乎工作正常。

【问题讨论】：

标签： javascript jquery microsoft-cognitive

【解决方案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"}');

【讨论】：

【解决方案2】：

服务的响应是二进制 JPEG 图像，由响应标头“Content-Type: image/jpeg”指示。

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

【讨论】：

谢谢，但这似乎不能回答问题（或者我至少无法从这些链接中得出答案）。我找不到将 Web 服务返回的图像设置为我的图像的 src 的正确语法。我已将代码更新如下：` .done(function (response) { $('#thumbnail').attr("src",("data:image/jpg;base64," +response)); })`其中“#thumbnail”是我的 html 中的标准 img 元素。我没有使用 PHP、asp.net 或任何其他类型的服务器端代码，只使用 JavaScript 和 JQuery
从链接中，我希望提出这样的建议：$('#thumbnail').attr("src",("data:image/jpeg;base64,"+btoa(response)));，它使用浏览器的btoa 函数进行base64 编码。然而，这似乎不起作用，在进一步阅读时，jQuery 的.ajax 函数似乎不能很好地处理二进制响应，正如here 所讨论的那样。该页面有几个解决方案，以 jQuery 插件的形式，或者只是简单的 XHR 调用。
谢谢，我会进一步调查并在有更新时在这里报告
这些链接都不行。我觉得我正在接近FileReader。这是我最新的done 函数：var response = document.querySelector('#response'); var reader = new FileReader(); reader.addEventListener("load", function () { var image = new Image(); image.src = this.result; response.appendChild(image); }, false); reader.readAsDataURL(new Blob([file])); 但它仍然没有显示图像