实例地址：http://www.flybaba.cn/fun/FaceDetect/
原理：利用base64来传输图片
展示页
<!DOCTYPE html>
<html>
<head>
<title>识别</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="col-md-4" style="border-right: 2px solid #cdcdcd;">
<h3>你照片中的颜值年龄秘密</h3>
<form style="margin-top: 100px;" target="tg">
<div class="form-group">
<label for="exampleInputFile">请先点击 [浏览] 选择人物图片，<br>然后点击 [检测] </label>
<input type="file" id="myfile" name="myfile">
</div>
</form>
<button id="mybtn" type="button" class="btn btn-default">检测</button>
<img class="image_thumb" width="300px" style="margin-top: 20px;">
</div>
<div class="right_part col-md-8" style="display: none;">
<ul class="list-group" style="margin-top: 200px;">
<li class="list-group-item">年龄: <span class="age">加载中...</span>岁</li>
<li class="list-group-item">性别: <span class="gender">加载中...</span></li>
<li class="list-group-item">种族: <span class="race">加载中...</span></li>
<li class="list-group-item">颜值: <span class="beauty">加载中...</span> (范围0-100)</li>
<li class="list-group-item">表情: <span class="expression">加载中...</span></li>
<li class="list-group-item">眼镜: <span class="glasses">加载中...</span></li>
<li class="list-group-item">情绪: <span class="emotion">加载中...</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
//图片预览
$("#myfile").change(function(){
$imginfo = $(this).get(0).files[0];
var fr = new FileReader();
fr.readAsDataURL($imginfo); //发起异步请求
fr.onload = function(){
//读取完成后，数据保存在对象的 result 属性中
pic = this.result;
pic_nohead = pic.substr(pic.indexOf(',')+1);
$(".image_thumb").attr("src",pic);
}
})
//ajax访问服务页
$(function(){
$('#mybtn').click(function(){
$('.right_part').show();
$.post('index.php',{img_base64:pic_nohead},function(data){
//年龄
$('.right_part ul li .age').html(data.result.face_list[0].age);
//颜值
$('.right_part ul li .beauty').html(data.result.face_list[0].beauty);
//性别
if(data.result.face_list[0].gender.type == 'male'){
$('.right_part ul li .gender').html('男性');
}else{
$('.right_part ul li .gender').html('女性');
}
//人种
if(data.result.face_list[0].race.type == 'yellow'){
$('.right_part ul li .race').html('黄种人');
}else if(data.result.face_list[0].race.type == 'white'){
$('.right_part ul li .race').html('白种人');
}else if(data.result.face_list[0].race.type == 'black'){
$('.right_part ul li .race').html('黑种人');
}else if(data.result.face_list[0].race.type == 'arabs'){
$('.right_part ul li .race').html('阿拉伯人');
}
//表情
if(data.result.face_list[0].expression.type == 'none'){
$('.right_part ul li .expression').html('不笑');
}else if(data.result.face_list[0].expression.type == 'smile'){
$('.right_part ul li .expression').html('微笑');
}else if(data.result.face_list[0].expression.type == 'laugh'){
$('.right_part ul li .expression').html('大笑');
}
//情绪
if(data.result.face_list[0].emotion.type == 'angry'){
$('.right_part ul li .emotion').html('愤怒');
}else if(data.result.face_list[0].emotion.type == 'disgust'){
$('.right_part ul li .emotion').html('厌恶');
}else if(data.result.face_list[0].emotion.type == 'fear'){
$('.right_part ul li .emotion').html('恐惧');
}else if(data.result.face_list[0].emotion.type == 'happy'){
$('.right_part ul li .emotion').html('高兴');
}else if(data.result.face_list[0].emotion.type == 'sad'){
$('.right_part ul li .emotion').html('伤心');
}else if(data.result.face_list[0].emotion.type == 'surprise'){
$('.right_part ul li .emotion').html('惊讶');
}else if(data.result.face_list[0].emotion.type == 'neutral'){
$('.right_part ul li .emotion').html('无情绪');
}
//眼镜
if(data.result.face_list[0].glasses.type == 'none'){
$('.right_part ul li .glasses').html('无眼镜');
}else if(data.result.face_list[0].glasses.type == 'common'){
$('.right_part ul li .glasses').html('普通眼镜');
}else if(data.result.face_list[0].glasses.type == 'sun'){
$('.right_part ul li .glasses').html('墨镜');
}
},'json');
})
})
</script>
</body>
</html>
服务端页面
<?php
//获取access_token
// 24.3ea065d18c0ac8816e59bc833ec3adf1d.2592000.1546656690.282335-15066975
/**
* 发起http post请求(REST API), 并获取REST请求的结果
* @param string $url
* @param string $param
* @return - http response body if succeeds, else false.
*/
function request_post($url = '', $param = '')
{
if (empty($url) || empty($param)) {
return false;
}
$postUrl = $url;
$curlPost = $param;
// 初始化curl
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $postUrl);
curl_setopt($curl, CURLOPT_HEADER, 0);
// 要求结果为字符串且输出到屏幕上
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
// post提交方式
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
// 运行curl
$data = curl_exec($curl);
curl_close($curl);
return $data;
}
//获取图片base64编码
$base64_image = $_POST['img_base64'];
$token = '24.3ea065d18c0ac8816e59bc833ec3adf1d.2592000.1546656690.282335-15066975';
$url = 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' . $token;
$bodys = "{\"image\":\"".$base64_image."\",\"image_type\":\"BASE64\",\"face_field\":\"faceshape,facetype,age,beauty,gender,race,expression,emotion,glasses\"}";
$res = request_post($url, $bodys);
echo $res;
网友评论