Javascript 显示牛津计划'；s情绪API结果

多亏了这篇文章，我成功地运行了以下代码

JSSample
$（函数（）{
$.ajax({
url:“https://api.projectoxford.ai/emotion/v1.0/recognize",
发送前：函数（xhrObj）{
//请求头
setRequestHeader（“内容类型”、“应用程序/json”）；
setRequestHeader（“Ocp Apim订阅密钥”，“此处为我的密钥”）；
},
类型：“POST”，
//请求主体
数据：“{”url:”https://oxfordportal.blob.core.windows.net/emotion/recognition1.jpg"}',
})
.完成（功能（数据）{
警惕（“成功”）；
})
.失败（功能（错误）{
log（error.getAllResponseHeaders（））；
警报（“失败”）；
});
});

---

这似乎是个愚蠢的问题，但我一直在想如何从HTML文件中获得情感输出？i、 e.我想生成一个文本文件，显示每个情绪的情感API输出，而不是成功警报（就像在他们的网站上一样）。

一个解决方案是阅读关于的。您可以在done（）中获取ajax调用的响应，并创建所需的文本文件。下面是一个使用我在JSFIDLE上找到的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);

---

数据是一个数组，每个面一个项目。如果只想转储文本，可以调用

JSON.stringify（data）

。如果您想以HTML格式打印，请查看。

我已经在我的网站上完成了这项工作，该网站也位于GitHub的以下位置：

我在网站中显示数据的方式是枚举Javascript中的面数组，并使用基本CSS在正确的位置显示矩形，使用引导弹出窗口显示详细数据

在这个响应中有太多的内容，所以我建议您查看GitHub回购协议，但这里有一些关键内容

Javascript

---

这在网站上吗？您想生成一个供用户下载的文件吗？它确实在网站上。请查看带有HTML标记的已编辑问题。很高兴有一个可下载的文件生成是的。嗨，谢谢你的回答，但是我想你误解了我的问题。我希望能够显示输出（即JSON格式的分数（），当您说“显示输出”时，您的意思是什么？您的问题说您希望生成输出的文本文件（JSON响应中的分数）.那么，文本文件会包含分数吗？为歧义道歉。这正是我的意思。现在我只想能够显示我测试的每个图像的分数字段，作为警报就可以了。文本文件只是我尝试做的一个示例。没问题！因此，在done（）中，响应应该在数据对象中，因此您应该准备console.log它。当您执行ajax调用时，数据的内容是什么？感谢您的帮助！我不太确定您的意思，您所指的数据对象将是分数字段？即data.scores？如果我没有弄错，来自ajax调用的数据内容将我是

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);

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"
        });

    });

.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;
}