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

官方文档，请参考 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. TinyXML2的使用

    -----------------------------------------------------------------2015年7月21日16:37:53----------------- ...

  2. Flex布局：实现左右两列自伸缩撑满效果的

    目前测试支持的浏览器: 兼容IE10及以上.Chrom.Firefox浏览器. 假如考虑IE10以下浏览器,可以考虑其他写法. 话不多说,上代码:   <div style="back ...

  3. Android 开发笔记___SQLite__优化记住密码功能

    package com.example.alimjan.hello_world; /** * Created by alimjan on 7/4/2017. */ import com.example ...

  4. Samba服务安装及配置

    服务器环境:CentOS6.9 Linux 2.6.32-696.10.1.el6.x86_64 安装Samba服务 过程中会安装3个服务smb(文件.打印共享服务,使用139.445端口).nmb( ...

  5. [DeeplearningAI笔记]ML strategy_2_4端到端学习

    机器学习策略-端到端学习 End-to-end deeplearning 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.9 什么是端到端学习-What is End-to-end dee ...

  6. JAVAscript学习笔记 js异常 第二节 （原创） 参考js使用表

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

  7. zabbix 3.2 高可用实现方式一，亲测无坑

    1.架构设计图 2.设计说明 1. 基础架构为LAMP环境,采用keepalived实现zabbix服务器高可用,保证主server的mysql或者httpd宕掉后能切换到从server. 2.数据库 ...

  8. java与OC比较

    转自:http://blog.sina.com.cn/s/blog_93742d0d010165qi.html 1.Cocoa是什么?Cocoa是使用OC语言编写的工具包,里面有大量的类库.结构体,说 ...

  9. vs2015添加T4模版

    <#@ template language="C#" debug="false" hostspecific="true"#> & ...

  10. 如何兼容所有Android版本选择照片或拍照然后裁剪图片--基于FileProvider和动态权限的实现

    我们知道, Android操作系统一直在进化. 虽然说系统是越来越安全, 可靠, 但是对于开发者而言, 开发难度是越来越大的, 需要注意的兼容性问题, 也越来越多. 就比如在Android平台上拍照或 ...