0
点赞
收藏
分享

微信扫一扫

使用小程序+C#实现人脸、手势双重识别认证

追风骚年 2022-10-25 阅读 110
1024程序员节小程序c#原力计划

一、小程序

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);
        }

2.4、页面数据渲染

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

举报

相关推荐

小程序实现人脸识别功能

深度学习rnn人工智能

图片识别，人脸识别，手势识别，签到小程序，借助百度AI智能识别功能

人脸识别图片识别人工智能人脸识别小程序

C# RFB 人脸识别

C# RFB 人脸识别ListSystemideHarmonyOS后端开发

微信小程序｜基于小程序实现人脸识别对比

小程序微信小程序微信原力计划

c# 人脸识别的思路

云原生kubernetes笔记

C#项目实战｜人脸识别考勤

c#windows

【人脸识别】Python实现人脸识别Python实现人脸识别

pythonpycharm机器学习人脸识别级联分类器编程语言

使用OpencvSharp实现人脸识别

笔记android

C# Onnx Yolov8 Detect 手势识别

YOLOC#手势识别SystemImageTextHarmonyOS后端开发

Java使用opencv实现人脸识别、人脸比对

spark大数据分布式
0 条评论