



一、小程序
1.1、注册账号及创建小程序
1.2、页面设计及样式实现
<view class="containerBox">
<view class="leftBtn" bindtap="loadImage">上传人脸库</view>
</view>
<view>
<image src="{{reproduction}}" class="showImg"></image>
</view>
<view class="containerBox">
<view class="rightBtn" bindtap="loadImagethis">上传实时照</view>
</view>
<view class="msgTitle">温馨提示:请上传手势数字2的照片</view>
<view style="display: flex;" >
<image src="{{imgSrc}}" class="nowImg"></image>
<view class="contentBox" wx:if="{{isShowDetail}}">
<view class="msgTitleDetail">
<view class="resultTitle">识别分数:{{score}}</view>
<view class="resultTitle2">人脸相似度得分,推荐阈值80分</view>
<view class="resultTitle2" wx:if="{{gestures==0}}">未检测到手势数字2!请重新上传!</view>
<view class="resultTitle2" wx:else>检测到手势数字2!识别通过!</view>
</view>
</view>
</view>
<view class="centerBtn" bindtap="identify">图像识别</view>
.containerBox{
width:750rpx; display:flex;height:62rpx;margin-top:20rpx;
}
.leftBtn{
width:181rpx;height:62rpx;color:#4FAFF2;border:1rpx solid #4FAFF2;border-radius:10rpx;text-align: center;line-height:62rpx;font-size:28rpx;margin-left: 284.5rpx;
}
.rightBtn{
width:181rpx;height:62rpx;color:white;border:1rpx solid #4FAFF2;border-radius:10rpx;text-align: center;line-height:62rpx;font-size:28rpx; margin-left: 284.5rpx;background:#4FAFF2;
}
.centerBtn{
width:181rpx;height:62rpx;color:white;border:1rpx solid #29D124;border-radius:10rpx;text-align: center;line-height:62rpx;font-size:28rpx;margin-left: 284rpx;background:#29D124;margin-top:20rpx;
}
.showImg{
width:300rpx;height:300rpx;margin-left:225rpx;margin-top:25rpx;border-radius:50%;
}
.nowImg{
width:300rpx;height:300rpx;margin-left:20rpx; margin-top:10rpx;border-radius:50%;
}
.result{
margin-top:20rpx;
}
.resultTitle{
margin-left:25rpx;margin-top:10rpx;color:#2B79F5;font-size:25rpx;
}
.resultTitle2{
margin-left:25rpx;margin-top:10rpx;color:red;font-size:25rpx;
}
.msgTitle{
color:#0890FF;font-size:30rpx;height:30rpx;line-height:30rpx;font-weight:bold;margin-top:30rpx;text-align: center;
}
.contentBox{width:430rpx;height:300rpx;margin-top:10rpx;}
.msgTitleDetail{
width:430rpx;height:300rpx;margin-top: 112.5rpx;
}
.productTableTr{
height: 80rpx;line-height: 80rpx;border-bottom: 5rpx solid #F8F8F8;display:flex;
}
.leftTr{
width: 583rpx;height: 80rpx;line-height: 80rpx;
}
.rightTr{
width: 119rpx;height: 80rpx;line-height: 80rpx;color: #FF2525;font-size: 26rpx;
}
.leftTrText{
color: #2B79F5;font-size: 28rpx;margin-left: 15rpx;width: 283rpx;
}
.productDetailTable{
width: 702rpx;margin-left: 24rpx;border:5rpx solid #F8F8F8;border-radius: 6rpx;
}
.copyBtn{
color:white;background:#2B79F5;border-radius:8rpx;width:100rpx;height:50rpx;margin-top:15rpx;
}
wx.chooseImage({
count: 0,
sizeType: ['original', 'compressed'], //原图 / 压缩
sourceType: ['album', 'camera'], //相册 / 相机拍照模式
success(res) {
that.setData({
reproduction: res.tempFilePaths[0]
});
}
})
1.3、接口参数拼接
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0],
encoding: 'base64',
success(data) {
let baseData = data.data; //'data:image/png;base64,' + data.data;
that.setData({
baseData: baseData
});
}
});
二、API
2.1、注册账号及创建应用
2.2、创建API项目
2.3、实现获取Token接口
/// <summary>
/// 模拟Get请求
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public static string HttpGet(string url)
{
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
request.Method = "GET";
request.ContentType = "application/json";
request.Accept = "*/*";
request.Timeout = 15000;
request.AllowAutoRedirect = false;
WebResponse response = null;
string responseStr = null;
try
{
response = request.GetResponse();
if (response != null)
{
StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8);
responseStr = reader.ReadToEnd();
reader.Close();
}
}
catch (Exception)
{
throw;
}
finally
{
request = null;
response = null;
}
return responseStr;
}
/// <summary>
/// 解析Token帮助类
/// </summary>
public class TokenClass {
public string refresh_token { get; set; }
public string session_key { get; set; }
public string scope { get; set; }
public string session_secret { get; set; }
/// <summary>
/// Access Token的有效期(秒为单位,有效期30天);
/// </summary>
public int expires_in { get; set; }
/// <summary>
/// 获取的Access Token
/// </summary>
public string access_token { get; set; }
}
/// <summary>
/// 获取token
/// </summary>
/// <returns></returns>
public static TokenClass GetToken(string client_id,string client_secret) {
var grant_type = "client_credentials";
//拼接参数到地址
string tokenUrl = "https://aip.baidubce.com/oauth/2.0/token?grant_type=" + grant_type + "&client_id=" + client_id + "&client_secret=" + client_secret;
string resultStr = RequestHelper.HttpGet(tokenUrl);
if (string.IsNullOrWhiteSpace(resultStr))
{
//返回false
}
TokenClass info = Newtonsoft.Json.JsonConvert.DeserializeObject<TokenClass>(resultStr);
return info;
}
public ActionResult Index()
{
ViewBag.Title = "Home Page";
TokenClass info = GetToken("你申请的应用Key", "你申请的应用的Sercet");
return View();
}
2.4、接口数据处理
/// <summary>
/// 人脸相似度对比及手势识别
/// </summary>
/// <param name="baseSence1"></param>
/// <param name="baseSence12"></param>
/// <returns></returns>
public ActionResult GetImageBase(string img1, string img2)
{
var faceResult = FaceData(img1, img2);
return View();
}
let that = this;
let data = {img1: that.data.baseData,img2: that.data.baseDatathis};
wx.request({
url: 'https://localhost:44312/Home/GetImageBase',
method: 'POST',
data: {
img1: that.data.baseData,
img2: that.data.baseDatathis
},
success: function (identify) {
that.setData({
isShowDetail: true,
score: identify.data.score,
gestures: identify.data.gestures,
});
}
})
/// <summary>
/// 人脸识别返回参数帮助类
/// </summary>
public class FaceClass {
public int error_code { get; set; }
public string error_msg { get; set; }
public Int64 log_id { get; set; }
public int timestamp { get; set; }
public int cached { get; set; }
public scoreInfo result { get; set; }
}
public class scoreInfo
{
/// <summary>
/// 分数
/// </summary>
public decimal score { get; set; }
public List<face> face_list { get; set; }
}
public class face {
public string face_token { get; set; }
}
/// <summary>
/// 手势识别返回参数帮助类
/// </summary>
public class GesturesClass {
public Int64 log_id { get; set; }
public int result_num { get; set; }
public List<gestures> result { get; set; }
}
public class gestures {
/// <summary>
/// 手势名称 [1]
/// </summary>
public string classname { get; set; }
public int height { get; set; }
public int left { get; set; }
public decimal probability { get; set; }
public int top { get; set; }
public int width { get; set; }
}


/// <summary>
/// 人脸相似度对比及手势识别
/// </summary>
/// <param name="baseSence1"></param>
/// <param name="baseSence12"></param>
/// <returns></returns>
public ActionResult GetImageBase(string img1, string img2)
{
var faceResult = FaceData(img1, img2);
var gesturesResult = GesturesData(img2);
var score = faceResult.result.score;//人脸相似度分数
var gestures = 0;
if (gesturesResult.result.Count() > 1)
{
if (gesturesResult.result[1].classname == "Two")
{
gestures = 1;
}
}
JsonData info = new JsonData();
info.score = score;
info.gestures = gestures;
return Json(info);
}