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

官方文档，请参考 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. python、java和php的百度指数对比

    Python: Python是纯粹的自由软件, 源代码和解释器CPython遵循 GPL(GNU General Public License)协议.Python语法简洁清晰,特色之一是强制用空白符( ...

  2. MySQL-client-5.6.36-1.linux_glibc2.5.x86_64.rpm安装详解

    centos6.8已经安装了mysql,所以要卸载掉 查看命令 rpm -qa | grep mysql 注意:MySQL区分大小写 grep mysql 和grep MySQL 是不一样的!! 卸载 ...

  3. js实现查找字符串中最多的字符的个数

    用hash table实现.key是字符,value是字符个数. var hashTable={}; var str="fjsdeiuwidshjfhjsksghfjhsjjskalsk&q ...

  4. js中的路由匹配

    routie插件:http://projects.jga.me/routie/ /** * 路由 * @example * routie( * { * '/':function(){ }, * '/m ...

  5. Problem C: 是否回文数？

    Description 定义Data类,有一个int类型的属性.定义其构造函数.setValue函数和isPalindrome函数,其中setValue函数用于设置属性值,isPalindrome用于 ...

  6. 万能日志数据收集器 Fluentd - 每天5分钟玩转 Docker 容器技术（91）

    前面的 ELK 中我们是用 Filebeat 收集 Docker 容器的日志,利用的是 Docker 默认的 logging driver json-file,本节我们将使用 fluentd 来收集容 ...

  7. C#设计模式之十三代理模式（Proxy）【结构型】

    一.引言   今天我们要讲[结构型]设计模式的第七个模式,也是"结构型"设计模式中的最后一个模式,该模式是[代理模式],英文名称是:Proxy Pattern.还是老套路,先从名字 ...

  8. C#抓取和分析网页的类

    抓取和分析网页的类. 主要功能有: Ontology 1.提取网页的纯文本,去所有html标签和javascript代码 2.提取网页的链接,包括href和frame及iframe 3.提取网页的ti ...

  9. Rsync服务

    第1章 Rsync开篇介绍 1.1 rsync的定义 Rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于unix/linux/windo ...

  10. [转载] 一致性hash算法释义

    转载自http://www.cnblogs.com/haippy/archive/2011/12/10/2282943.html 一致性Hash算法背景 一致性哈希算法在1997年由麻省理工学院的Ka ...