通过Javascript调用微软认知服务情感检测接口的两种实现方式
这是今天在黑客松现场写的代码。我们的项目需要调用认知服务的情感识别接口。官方提供了一种方式,就是从一个远程图片进行识别。我另外写了一个从本地文件读取并上传进行识别的例子。
官方文档,请参考 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>
相关文章
- 教程 | face-api.js:在浏览器中进行人脸识别的JavaScript接口
- JavaScript - 本地上传 Excel 文件页面表格预览(不可编辑)
- JavaScript - 二维数组对象去除完全相同的重复对象(二维数组去重)
- JavaScript 请求服务端接口
- Javascript 笔记与总结(2-5)window 对象
- 《趣学JavaScript——教孩子学编程》——第1章 认识JavaScript1.1 认识JavaScript
- PyScript能够取代Javascript么,对 Web 开发的未来意味着什么?
- Javascript面向对象编程(二):构造函数的继承 作者:yuan一峰
- Javascript 面向对象编程(一):封装 作者:yuan一峰
- JavaScript之简易http接口测试工具网页版
- 一文带你了解JavaScript函数式编程
- JavaScript中8个常见的陷阱
- 华为OD机试 - 选座位(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- 如何进行高效JavaScript单元测试
- 狂神说笔记——JavaScript快速入门11
- arcgis api for javascript Error: multipleDefine
- 原生js源码之JavaScript的apply方法