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

官方文档，请参考 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. Ionic3 启动页以及应用图标

    将新的启动页和应用图标图片(最好是高清png)上传到根目录 resources 使用命令自动生成,通过CMD进入项目所在文件夹,分别执行 ionic cordova resources android ...

  2. 负载均衡集群企业级应用实战—LVS

    一.负载均衡集群介绍 1.集群 ① 集群(cluster)技术是一种较新的技术,通过集群技术,可以在付出较低成本的情况下获得在性能.可靠性.灵活性方面的相对较高的收益,其任务调度则是集群系统中的核心技 ...

  3. CSS预处理器——Sass、LESS和Stylus实践【未删减版】

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

  4. java获取当前上一周、上一月、上一年的时间

    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Calendar c = Calend ...

  5. Makefile例子引入

    Makefile规则 target ... :prerequisites... command target就是一个目标文件,可以是object file,也可以是可以执行文件,也可以是一个标签 pr ...

  6. python变量命名规则

    在Python中使用变量时,需要遵守一些规则和指南.违反这些规则将引发错误,而指南旨在让你编写的代码更容易阅读和理解.请务必牢记下述有关变量的规则.  变量名只能包含字母.数字和下划线.变量名可以字 ...

  7. SSE图像算法优化系列十二：多尺度的图像细节提升。

    无意中浏览一篇文章,中间提到了基于多尺度的图像的细节提升算法,尝试了一下,还是有一定的效果的,结合最近一直研究的SSE优化,把算法的步骤和优化过程分享给大家. 论文的全名是DARK IMAGE ENH ...

  8. socket.io 入门篇（三）

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  9. RAC(ReactiveCocoa)使用方法(一)

    RAC(ReactiveCocoa)使用方法(一) RAC(ReactiveCocoa)使用方法(二) 什么是RAC? 最近回顾了一下ReactiveCocoa的方法,也看了一些人的文章,现写篇文章总 ...

  10. 例题：填词-poj

    问题描述 Alex喜欢填词游戏.填词游戏是一个非常简单的游戏.填词游戏包括一个N X M大小的矩形方格盘和P个单词.玩家需要把每个方格中填上一个字母使得每个单词都能在方格盘上被找到.每个单词都能被找到 ...