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

官方文档，请参考 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. HDU1150 Machine Schedule(二分图最大匹配、最小点覆盖)

    As we all know, machine scheduling is a very classical problem in computer science and has been stud ...

  2. Hat’s Words

    Hat’s Words Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. js数组遍历some,foreach,map,filter,every对比

    1.  [...].some(ck)函数       ----      某个一个为true,则为true 对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true.如果都返回f ...

  4. .NET项目从CI到CD-Jenkins_Pipeline的应用

    一.罗里吧嗦 最近迁移了服务器,顺道完善下服役了一两年的Jenkins服务,主要是把Slave搭建起来,还有等等.本文只是我对Jenkins Pipeline的一些自己的理解与应用,欢迎指出错误,欢迎 ...

  5. 淘宝轮播JS

    taobao首页轮播原生js面对对象封装版 Author:wyf 2012/2/25

  6. SElinux用户管理操作

    查看当前用户上下文 id -Z 查看登陆的用户和其对应的SELinux用户 semanage login -l 改变用户和SELinux的对应关系 semanage login -a选项能改变,-s用 ...

  7. Python 解LeetCode：367. Valid Perfect Square

    题目描述:给出一个正整数,不使用内置函数,如sqrt(),判断这个数是不是一个数的平方. 思路:直接使用二分法,貌似没啥好说的.代码如下: class Solution(object): def is ...

  8. 1045-access denied for user 'root'@

    在用sqlyog图形界面远程登录阿里云mysql数据库的时候出现了如下的问题, 1045-access denied for user 'root'@ 刚开始以为阿里云esc的安全组并没有配置3306 ...

  9. js 切换全屏

    公司有一个需求就是点击某一个按钮实现全屏切换功能,然后呢我就在网上扒了段代码.封装了一下.使用的小伙伴们可以看看哦! 切换全屏代码 <!DOCTYPE html> <html> ...

  10. RabbitMQ之工作队列

    工作队列 工作队列(又称:任务队列Task Queues)是为了避免等待一些占用大量资源.时间的操作,当我们把任务Task当做消息发送队列中,一个运行在后台的工作者worker进程就会取出任务然后处理 ...