这是今天在黑客松现场写的代码。我们的项目需要调用认知服务的情感识别接口。官方提供了一种方式，就是从一个远程图片进行识别。我另外写了一个从本地文件读取并上传进行识别的例子。

官方文档，请参考 https://docs.azure.cn/zh-cn/cognitive-services/emotion/quickstarts/javascript

第一种方式，使用远程的图片文件

<!DOCTYPE html>

<html>

<head>
     <title></title>

<script src="Scripts/jquery-3.2.1.min.js"></script>
     <script type="text/javascript">
         $(function () {
             $("#test").click(function () {
                 var params = {
                     // Request parameters
                 };
                 $.ajax({
                     url: "https://api.cognitive.azure.cn/emotion/v1.0/recognize" + $.param(params),
                     beforeSend: function (xhrObj) {
                         // Request headers
                         xhrObj.setRequestHeader("Content-Type", "application/json");

// NOTE: Replace the "Ocp-Apim-Subscription-Key" value with a valid subscription key.
                         xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "换成你的key");
                     },
                     type: "POST",
                     // Request body
                     data: '{"url": "https://tse3.mm.bing.net/th?id=OIP.4M-jZG7HnQUpUKJ0wowq7QDrEs&pid=1.7"}',
                 })
                     .done(function (data) {
                         console.log(data)
                     })
                     .fail(function () {
                         alert("error");
                     });
             });
         });</script>

</head>

<body>
     <button id="test">测试</button>

</body>

</html>

第二种方式，直接使用本地文件，读取二进制上传

<!DOCTYPE html>

<html lang="en">

<head>
     <meta charset="utf-8">
     <title>File Emotion detecting</title>

<link rel="stylesheet" href="style.css">

</head>

<body>
     <div id="page-wrapper">

<h1>Text File Reader</h1>
         <div>
             Select a text file:
             <input type="file" id="fileInput">
         </div>
         <pre id="fileDisplayArea"></pre>

</div>
     <script src="Scripts/jquery-3.2.1.min.js"></script>
     <script>
         window.onload = function () {
             var fileInput = document.getElementById('fileInput');
             var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function (e) {
                 // Put the rest of the demo code here.
                 var file = fileInput.files[0];
                 var textType = /image.*/;
                 if (file.type.match(textType)) {
                     var reader = new FileReader();

reader.onload = function (e) {
                         fileDisplayArea.innerText = reader.result;

var params = {
                             // Request parameters
                         };

$.ajax({
                             url: "https://api.cognitive.azure.cn/emotion/v1.0/recognize?" + $.param(params),
                             beforeSend: function (xhrObj) {
                                 xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                                 xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "换成你的key");
                             },
                             type: "POST",
                             data: reader.result,
                             processData: false
                         })
                             .done(function (data) {
                                 alert("success");
                             })
                             .fail(function () {
                                 alert("error");
                             });
                     }

reader.readAsArrayBuffer(file);
                 }
                 else {
                     fileDisplayArea.innerText = "File not supported!";
                 }
             });
         }
     </script>

</body>

</html>

通过Javascript调用微软认知服务情感检测接口的两种实现方式的更多相关文章

  1. 【AI开发第一步】微软认知服务API应用

    目录 介绍 API分类 使用‘视觉’API完成的Demo 点击直接看干货 介绍 从3月份Google家的阿尔法狗打败韩国围棋冠军选手李世石,到之后微软Build2016大会宣布的“智能机器人”战略.种 ...

  2. Windows 10 IoT Serials 11 – 如何设置微软认知服务中EndPoint

    1.问题描述 在UWP应用开发过程中,如果要使用微软认知服务,很多开发者会使用Microsoft.Oxford.Face.Microsoft.Oxford.Vision的NuGet包来完成.如果在vi ...

  3. JavaScript 函数的两种声明方式

    1.函数声明的方式 JavaScript声明函数有两种选择:函数声明法,表达式定义法. 函数声明法 function sum (num1 ,num2){ return num1+num2 } 表达式定 ...

  4. 安卓服务(Service)的两种开启方式以及服务的生命周期

    安卓中服务的开启方式 一:採用start的方式开启服务 调用函数:startService(Intent)->onCreate()->onStart()/onStartCommand()- ...

  5. springboot 注册服务注册中心(zk)的两种方式

    在使用springboot进行开发的过程中,我们经常需要处理这样的场景:在服务启动的时候,需要向服务注册中心(例如zk)注册服务状态,以便当服务状态改变的时候,可以故障摘除和负载均衡. 我遇到过两种注 ...

  6. Android四大组件之服务的两种启动方式详解

    Service简单概述 Service(服务):是一个没有用户界面.可以在后台长期运行且可以执行操作的应用组件.服务可由其他应用组件启动(如:Activity.另一个service).此外,组件可以绑 ...

  7. 不停止MySQL服务增加从库的两种方式

    不停止MySQL服务增加从库的两种方式 转载自:http://lizhenliang.blog.51cto.com/7876557/1669829 现在生产环境MySQL数据库是一主一从,由于业务量访 ...

  8. 不停止MySQL服务增加从库的两种方式【转载】

    现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作. ...

  9. JavaScript脚本的两种放置方式

    JavaScript脚本的两种放置方式 1在body里用 script标签引用 2 直接写在<script></script>标签之中

随机推荐

  1. js实现强大功能

    作者:知乎用户链接:https://www.zhihu.com/question/48187821/answer/110002647来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  2. Oracle结合Mybatis实现取表中前10条数据

    之前一直使用mysql和informix数据库,查表中前10条数据十分简单: 最原始版本: select top * from student 当然,我们还可以写的复杂一点,比如外加一些查询条件? 比 ...

  3. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  4. vConsole--针对手机网页的前端 console 调试面板。

    一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...

  5. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

  6. ①bootstrap引入

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Problem H: STL——括号匹配

    Description 给出一堆括号,看其是否匹配,例如 ().()().(()) 这样的括号就匹配,       )(.)()) 而这样的括号就不匹配 Input 每一行代表一组测试样例,每组测试样 ...

  8. Django----中间件详解

    Django中间件 在http请求 到达视图函数之前   和视图函数return之后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 中间件的执行流程 1.执行完所有的request ...

  9. java工程师学习线路图

  10. eclipse中导入jsp等工程使用过程中常遇问题

    1.导入的工程JSP文件出现报错的情况 这个一般不怎么影响文件的执行,这些文件飘红主要是因为eclipse的校验问题. 具体错误信息:Multiple annotations found at thi ...