【问题标题】：Displaying Project Oxford's Emotion API result显示 Project Oxford 的 Emotion API 结果
【发布时间】：2016-05-03 23:11:10
【问题描述】：

感谢Adding Microsoft's Emotion API to HTML website 的这篇文章，我已经成功运行了以下代码。

<HTML>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(function() {
        $.ajax({
            url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","my-key-here");
            },
            type: "POST",
            // Request body
             data: '{"url": "https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"}',
        })
        .done(function(data) {
            alert("success");

        })
        .fail(function(error) {
        console.log(error.getAllResponseHeaders());

            alert("fail");
        });
    });
</script>
</body>
</head>
</html>

这似乎是个愚蠢的问题，但我一直想知道如何从 HTML 文件中获取情绪输出？即，我想生成一个文本文件，而不是 success 警报，该文件显示 Emotions API 的输出以及每种情绪（就像在他们的网站上一样）。

【问题讨论】：

这是在网站上吗？是否要生成文件供用户下载？
确实在网站上。请查看带有 HTML 标记的已编辑问题。有一个生成的可下载文件会很好。

标签： javascript html ajax windows microsoft-cognitive

【解决方案1】：

一种解决方案可能是阅读有关Blob 的信息。您可以从 done() 中的 ajax 调用中获取响应并创建您需要的文本文件。这是我在 JSFiddle 上找到的使用 Blob 的示例：

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

source

【讨论】：

您好，感谢您的回答，但我认为您误解了我的问题。我希望能够显示输出（即 JSON 格式的分数 (as Microsoft have demoed here)
当你说“显示输出”时，你是什么意思？您的问题说您想生成输出的文本文件（这是 json 响应中的分数）。那么，文本文件会包含分数吗？
为歧义道歉。这正是我的意思。现在我只想能够显示我测试的每张图像的分数字段，因为警报就可以了。文本文件只是我正在尝试做的一个例子。
没问题！因此，在 done() 中，响应应该在数据对象中，因此您应该将 console.log 它。执行ajax调用时数据的内容是什么？
感谢您的帮助！我不太清楚你的意思，你指的数据对象将是分数字段？即data.scores？如果我没记错的话，ajax 调用的数据内容将是something like this?

【解决方案2】：

data 是一个数组，每个面一个项目。如果您只是想转储文本，可以致电JSON.stringify(data)。如果你想在 HTML 中漂亮地打印它，请查看How can I pretty-print JSON using JavaScript?。

【讨论】：

【解决方案3】：

我已经在我的网站HowHappy.co.uk 上完成了这项工作，该网站也在 GitHub 上：https://github.com/martinkearn/How-Happy

我在网站中显示数据的方式是在 Javascript 中枚举人脸数组，并使用基本 CSS 在正确的位置显示矩形，并使用 Bootstrap 弹出框显示详细数据。

此回复内容太多，因此我建议您查看 GitHub 存储库，但这里有一些关键位

Javascript

var dataString = JSON.stringify(response); 
var data = JSON.parse(dataString); 

    //draw rectangle for each face
    $.each(data.Faces, function (index, value) {

        var rect = document.createElement('div');
        rect.className = "rect";
        rect.style.height = value.faceRectangle.height + "px";
        rect.style.width = value.faceRectangle.width + "px";
        rect.style.left = value.faceRectangle.left + "px";
        rect.style.top = value.faceRectangle.top + "px";
        rect.id = "rect" + index;

        $('#result').append(rect);

        //add popover
        var popoverBody = "Happiness: " + Number((value.scores.happiness).toFixed(2))
            + "<br>Fear: " + Number((value.scores.fear).toFixed(2))
            + "<br>Anger: " + Number((value.scores.anger).toFixed(2))
            + "<br>Contempt: " + Number((value.scores.contempt).toFixed(2))
            + "<br>Disgust: " + Number((value.scores.disgust).toFixed(2))
            + "<br>Neutral: " + Number((value.scores.neutral).toFixed(2))
            + "<br>Sadness: " + Number((value.scores.sadness).toFixed(2))
            + "<br>Surprise: " + Number((value.scores.surprise).toFixed(2));
        $('#rect' + index).popover({
            title: (index + 1)
            content: popoverBody,
            html: "true",
            trigger: "click"
        });

    });

CSS

.rect {
    position: absolute;
    border-color: #FFEA0E;
    border-style: solid;
    border-width: 4px;
    z-index: 10;
}

#result {
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: auto;
}

#resultDetails {
    font-size: 3rem;
    text-align: center;
}

【讨论】：