第一步： 搭建服务端（node端）
1.建立一个文件夹，在文件夹里建立一个packge.json文件将以下内容复制到文件中（因为利用express创建，所以要安装express依赖）
{
“name”: “face”,
“description”: “face”,
“version”: “0.0.1”,
“private”: true,
“dependencies”: {
“express”: “^4.16.4”,
“request”: “^2.88.0”
}
}
1.再建立一个文件server.js,将以下代码复制到里面
var request = require(‘request’);
var url = require(‘url’);
var crypto = require(‘crypto’);
//var date = new Date().toUTCString(); //这里注释掉，和官方文档有区别。
var express = require(‘express’)
// 这里填写AK和请求
var ak_id = ‘x………….m’; //你阿里云的AccessKey id
var ak_secret = ‘B…………….X’; //你阿里云的AccessKey secret
var app = express();
//人脸属性识别
function getFaceAttribute(obj, getMsg) {
var options = {
//这里调用的是人脸属性识别接口
url: ‘https://dtplus-cn-shanghai.data.aliyuncs.com/face/verify’,
method: ‘POST’,
body: obj,//这里传递参数
headers: {
‘accept’: ‘application/json’,
‘content-type’: ‘application/json’,
‘date’: new Date().toUTCString(), //这里获取时间，防止出现 授权失败，时间过期问题
‘Authorization’: ”
}
};
md5 = function (buffer) {
var hash;
hash = crypto.createHash(‘md5’);
hash.update(buffer);
return hash.digest(‘base64’);
};
sha1 = function (stringToSign, secret) {
var signature;
return signature = crypto.createHmac(‘sha1’, secret).update(stringToSign).digest().toString(‘base64’);
};
// step1: 组stringToSign [StringToSign = #{method}\\n#{accept}\\n#{data}\\n#{contentType}\\n#{date}\\n#{action}]
var body = options.body || ”;
var bodymd5;
if (body === void 0 || body === ”) {
bodymd5 = body;
} else {
bodymd5 = md5(new Buffer(body));
}
console.log(bodymd5)
var stringToSign = options.method + “\n” + options.headers.accept + “\n” + bodymd5 + “\n” + options.headers[‘content-type’] + “\n” + options.headers.date + “\n” + url.parse(options.url).path;
console.log(“step1-Sign string:”, stringToSign);
// step2: 加密 [Signature = Base64( HMAC-SHA1( AccessSecret, UTF-8-Encoding-Of(StringToSign) ) )]
var signature = sha1(stringToSign, ak_secret);
// console.log(“step2-signature:”, signature);
// step3: 组authorization header [Authorization = Dataplus AccessKeyId + “:” + Signature]
var authHeader = “Dataplus ” + ak_id + “:” + signature;
console.log(“step3-authorization Header:”, authHeader);
options.headers.Authorization = authHeader;
console.log(‘authHeader’, authHeader);
// step4: send request
/*if (error) {
console.log(“error”, error)
}
console.log(“step4-response body:”, response.statusCode, body)*/
function callback(error, response, body) {
getMsg(error, response, body);
}
request(options, callback);
}
//设置跨域访问
app.all(‘*’, function (req, res, next) {
res.header(“Access-Control-Allow-Origin”, “*”);
res.header(“Access-Control-Allow-Headers”, “X-Requested-With”);
res.header(“Access-Control-Allow-Methods”, “PUT,POST,GET,DELETE,OPTIONS”);
res.header(“X-Powered-By”, ‘ 3.2.1’)
res.header(“Content-Type”, “application/json;charset=utf-8”);
next();
});
app.get(‘/getFaceAttribute’, function (req, res) {
getFaceAttribute(‘{type:0,image_url_1:”‘ + req.query.image_url_1 + ‘”,content_1:”‘ + req.query.content_1 + ‘”,image_url_2:”‘ + req.query.image_url_2 + ‘”,content_2:”‘ + req.query.content_2 +'”}’, function (error, response, body) {
if (error) {
console.log(“error”, error)
}
console.log(“step4-response body:”, response.statusCode, body)
res.end(JSON.stringify(body));
});
});
app.listen(8888,function(){
console.log(‘listening 8888’)
});
console.log(“port at 8888”);
建立好这两个文件后在控制台进入改文件夹执行以下命令
npm install
执行成功后再执行
node server.js
服务端程序就跑好了。
在浏览器端输入 http://127.0.0.1:8888/getFaceAttribute 就可以查看服务端程序了。
第二步：书写前端代码
1.建立一个html文件将以下代码复制到页面里
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<script src=”https://code.jquery.com/jquery-3.0.0.min.js”></script>
<head>
<body>
<div>
<img class=”img1″ style=”max-width:300px;max-height:300px” src=”” />
<img class=”img2″ style=”max-width:300px;max-height:300px” src=”” />
</div>
<div style=”text-align:center”>同一个人？
<button οnclick=”getImg()”>点我判断</button>
</div>
<div style=”text-align:center” class=”isSamePerson”>匹配指数</div>
<script>
var imgarr = [‘http://img.hb.aicdn.com/0d9d568146f8ae162279235dcf07c549391037b675c0-cbsL1p_fw658’,
‘http://img.hb.aicdn.com/7f6c16bc552aac4c097e5e7e0a050f2cae9bbadf2466e-1m5xe9_fw658’,
‘https://hbimg.b0.upaiyun.com/d20cfe57e4456d409d5c1bb85551afc5ca35778e5cc8-e8RqAO_fw658’,
‘https://hbimg.b0.upaiyun.com/5980883930ef4770ca9086dc1ad4e8e51a66b8d048f7-jasSwH_fw658’,
‘https://hbimg.b0.upaiyun.com/c628845dec9cc1a37537dcfd8239c054ef43e13c56600-zqJBsk_fw658’,
‘https://hbimg.b0.upaiyun.com/bcee16a7a538de2146e362022d0b28078302a82a11f7b4-GMs2qD_fw658’,
‘https://hbimg.b0.upaiyun.com/d81613952e8345db9d018787e7e20fa35191359c1b87eb-298QRe_fw658’,
‘https://hbimg.b0.upaiyun.com/188308a2c0b85bf33a11244d7598b0f26e3407cafe20-wlMzrK_fw658’,
‘https://hbimg.b0.upaiyun.com/4df2d6f643d824584e21496aea13eeafab7d7ff32cc90-3oatlw_fw658’]
function getImg(){
var img1 = imgarr[Math.floor(Math.random()*imgarr.length)];
var img2 = imgarr[Math.floor(Math.random()*imgarr.length)];
$(‘.img1’).attr(‘src’,img1)
$(‘.img2’).attr(‘src’,img2)
$.ajax({
type:”get”,
url:”http://127.0.0.1:8888/getFaceAttribute”,//
async:true,
data:{
type:0,
image_url_1:img1,
content_1:”,
image_url_2:img2,
content_2:”
},
success:function(data){
var des = ‘匹配指数’
var data = JSON.parse(data)
if(data.confidence >0){
$(‘.isSamePerson’).text(des + data.confidence);
}else{
console.log(data);
}
},
error:function(data){
console.log(‘error’)
console.log(data);
}
});
}
getImg()
</script>
</body>
</html>
- 打开html文件 就可以访问了，页面如下图所示。
其实写这个DEMO踩了好多坑，踩坑经历就不写在这里了，我一开始对nodejs搭建后台都是一脸懵比，也看了网站的帖子并借鉴了过来。代码里面括号里的提示或备注就是踩坑总结。
详细内容请参考阿里云人脸识别官方文档 https://help.aliyun.com/knowledge_detail/53535.html
