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

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

转载作者：行者123 更新时间：2023-12-02 14:41:55

我正在使用 Microsoft 认知计算机视觉 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 的响应，以便将图像作为基本 64 字符串获取，并将其设置为图像元素上的 src。

最终会是这样的，但我不知道如何获得 <base64string>一点。

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

我已经尝试了 API 测试控制台中的所有内容 https://dev.projectoxford.ai/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fb/console它似乎工作得很好。

最佳答案

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