文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 18:40

关注

一、文章前言

此文主要通过小程序实现对比人脸相似度，并返回相似度分值，可以基于分值判断是否为同一人。人脸登录、用户认证等场景都可以用到。

二、具体流程及准备

2.1、注册百度开放平台及微信公众平台账号。
2.2、下载及安装微信Web开发者工具。
2.3、如需通过SDK调用及需准备对应语言的开发工具。

三、开发步骤

3.1、访问百度开放平台选择人脸识别并领取免费资源。

3.2、填写表单所需要的各项信息创建应用。

3.3、创建完毕后回到应用列表，将API Key 以及Serect Key复制出来，后面我们需要通过这些凭证来获取Token。

3.4、信息准备好后，打开微信开发者工具，新建项目，选择不使用模板、不使用云服务。

3.5、在pages文件夹下面创建一个文件夹并新建对应的page文件。

3.6、在JS文件中的onLoad函数中请求获取Token的接口，这时候就需要用到我们刚才所申请的ApiKey等信息； 了。


  onLoad(options) {
    let that = this;
    let ApiKey='这里填你所申请的ApiKey';
    let SecretKey='这里填你所申请的SecretKey';
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + ApiKey+'&client_secret='+SecretKey,
      method: 'POST',
      success: function (res) {
        that.setData({
          AccessToken:res.data.access_token
        });
      }
    });
  },

3.7、编译程序，检查接口是否有正常返回，下图所标记的字段就是我们所需要的token了，它的有效期为30天，记得要及时更新。

3.8、查看人脸对比接口请求说明及注意事项。

参数是否必选类型说明
image是string图片信息
image_type是string图片类型
image_type否string人脸的类型
quality_control否string图片质量控制
liveness_control否string活体检测控制
[
    {
        "image": "sfasq35sadvsvqwr5q...",
        "image_type": "BASE64",
        "face_type": "LIVE",
        "quality_control": "LOW",
        "liveness_control": "HIGH"
     },
     {
         "image": "sfasq35sadvsvqwr5q...",
         "image_type": "BASE64",
         "face_type": "IDCARD",
         "quality_control": "LOW",
         "liveness_control": "HIGH"
     }
 ]

3.9、接下来要实现选择图片及将其转换为base64的功能，因为图像识别的接口参数需要base64格式；

需要用到wx.chooseImage以及wx.getFileSystemManager()两个函数。这里我们得依次选择两张图片进行对比才能实现效果，因为没有搭建API，按正常的流程来说，是用户先上传自己的人脸信息到人脸库，然后在验证的环节的时候才需要上传实时的照片

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">上传人脸库</view>
  <view class="rightBtn" bindtap="loadImagethis">上传实时照</view>
</view>

  loadImage() {
    let that = this;
    wx.chooseImage({
      count: 0,
      sizeType: ['original', 'compressed'], //原图 / 压缩
      sourceType: ['album', 'camera'], //相册 / 相机拍照模式
      success(res) {
        that.setData({
          imgSrc: res.tempFilePaths[0]
        });
        //将图片转换为Base64格式
        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
            });
          }
        });
      }
    })
  },

<image src="{{imgSrc}}" class="showImg"></image>
参数是否必选类型说明
image是string图片信息(总数据大小应小于10M，图片尺寸在1920x1080以下)，图片上传方式根据image_type来判断。 两张图片通过json格式上传

3.10、将我们两次上传的图片信息进行拼接并传递，接口中所返回的score就是我们所需要的人脸相似度得分了。

    let that = this;
    let requestData = [{
        'image': that.data.baseData,
        'image_type': 'BASE64'
      },
      {
        'image': that.data.baseDatathis,
        'image_type': 'BASE64'
      }
    ];
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/match?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/json;charset=UTF-8;'
      },
      data: requestData,
      success: function (identify) {
    
      }
    })

字段类型说明
scorefloat人脸相似度得分，推荐阈值80分
face_listarray[]人脸信息列表
face_tokenstring人脸的唯一标志

3.11、将接口所返回的识别结果在页面进行展示。

<view class="result" wx:if="{{isShowDetail}}">
  <view class="resultTitle">识别分数：{{score}}</view>
  <view class="resultTitle">人脸相似度得分，推荐阈值80分</view>
</view>

四、完整代码

<!--index.wxml-->
<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">上传人脸库</view>
  <view class="rightBtn" bindtap="loadImagethis">上传实时照</view>
</view>
<view>
  <image src="{{reproduction}}" class="showImg"></image>
  <image src="{{imgSrc}}" class="showImg"></image>
</view>
<view class="result" wx:if="{{isShowDetail}}">
  <view class="resultTitle">识别分数：{{score}}</view>
  <view class="resultTitle">人脸相似度得分，推荐阈值80分</view>
</view>
<view class="centerBtn" bindtap="identify">图像识别</view>
<!--index.wxss-->

.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: 158rpx;
}
.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: 73rpx;
  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:50rpx;
  margin-top:25rpx;
  border-radius:50%;
}
.result{
  margin-top:20rpx;
}
.resultTitle{
  margin-left:75rpx;
  margin-top:10rpx;
  color:#2B79F5;
  font-size:25rpx;
}
.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;
}

 
  data: {
    token: '',
    imgSrc: '',
    isShowDetail: false,
    baseData: '',
  },
   
  onLoad(options) {
    let that = this;
    let grant_type = 'client_credentials';
    let client_id = '';
    let client_secret = '';
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=' + grant_type + '&client_id=' + client_id + '&client_secret=' + client_secret,
      method: 'post',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          token: res.data.access_token
        });
      }
    })
  },
  loadImage() {
    let that = this;
    wx.chooseImage({
      count: 0,
      sizeType: ['original', 'compressed'], //原图 / 压缩
      sourceType: ['album', 'camera'], //相册 / 相机拍照模式
      success(res) {
        that.setData({
          imgSrc: res.tempFilePaths[0]
        });
        //将图片转换为Base64格式
        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
            });
          }
        });
      }
    })
  },

到此这篇关于微信小程序实现人脸识别对比的文章就介绍到这了,更多相关小程序人脸识别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     807人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     433人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

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

前端开发2022-11-13

Java基于虹软实现人脸识别、人脸比对、活性检测等

前端开发2024-04-02

微信小程序实现身份证识别-ocr

前端开发2023-09-02

Python怎么实现人脸识别微笑检测

前端开发2023-06-21

PHP人脸识别小程序接口(阿里云OpenAPI)

前端开发2023-09-26

详解微信小程序官方人脸核身认证

前端开发2024-04-02

微信小程序中如何实现指纹识别功能

前端开发2024-04-02

微信小程序语音识别与合成怎么实现

前端开发2023-06-26

Java OpenCV实现人脸识别过程详解

前端开发2023-09-16

微信小程序里长按识别二维码的实现过程

前端开发2024-04-02

微信小程序里如何实现长按识别二维码

前端开发2023-06-13

微信小程序长按识别二维码

前端开发2023-09-03

微信小程序怎么实现知识付费

前端开发2023-06-27

Python实现人脸识别的详细图文教程

前端开发2024-04-02

SAP UI5和微信小程序对比之我见

前端开发2023-06-05

【微信小程序】实现微信小程序登录(附源码)

前端开发2023-09-07

微信小程序人如何实现自定义toast

前端开发2024-04-02

微信小程序官方人脸核身认证的示例分析

前端开发2023-06-15

微信小程序实现性别单选效果

前端开发2024-04-02

微信小程序使用同声传译实现语音识别功能

前端开发2024-04-02
位置：首页-资讯-前端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯