微信小程序｜基于小程序实现人脸数量检测

news2024/11/29 10:44:02

    • 一、文章前言
    • 二、具体流程及准备
    • 三、开发步骤
    • 四、完整代码

一、文章前言

此文主要通过小程序实现检测图片中的人脸数量并标记出位置信息。
当近视的小伙伴看不清远处的人时，用小程序一键识别就可以在手机上看清楚啦，是不是很实用呢。
典型应用场景：如人脸属性分析，基于人脸关键点的加工分析，人脸营销活动等。

二、具体流程及准备

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、查看人脸识别检测接口请求说明及注意事项。

  • 请求体格式化：Content-Type为application/json，通过json格式化请求体。
  • Base64编码：请求的图片需经过Base64编码，图片的base64编码指将图片数据编码成一串字符串，使用该字符串代替图像地址。您可以首先得到图片的二进制，然后用Base64格式编码即可。需要注意的是，图片的base64编码是不包含图片头的，如data:image/jpg;base64,。
  • 图片格式：现支持PNG、JPG、JPEG、BMP，不支持GIF图片。
参数是否必选类型说明
image是string图片信息
image_type是string图片类型
max_face_num否uint32最多处理人脸的数目，默认值为1，最大120
display_corp_image否string是否显示检测人脸的裁剪图base64值；0：不显示（默认）1：显示

3.9、接下来要实现选择图片及将其转换为base64的功能，因为图像识别的接口参数需要base64格式；
借助wx.chooseImage及wx.getFileSystemManager()两个函数，实现选择图片跟转换格式的效果。
在wxml实现两个按钮及对应的响应函数。

在这里插入图片描述

  <view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
  <image src="../../images/xj.png"  class="btnImg"></image>
  上传图像
  </view>
  <view class="rightBtn" bindtap="identify">
  <image src="../../images/face.png"  class="btnImg"></image>
  人脸检测
  </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
            });
          }
        });
      }
    })
  },

3.10、将图片参数进行拼接并调用接口。

    let that = this;
    let requestData = {
      'image': that.data.baseData,
      'image_type': 'BASE64',
      'max_face_num':120,
      'display_corp_image':1,
    }
  ;
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/json;'
      },
      data: requestData,
      success: function (identify) {
       
      }
    })

在这里插入图片描述

3.11、将结果进行打印输出，其中的face_num字段就是所检测到的人脸数量，face_list就是所检测到人脸详细信息，是通过数组的形式进行返回的。

在这里插入图片描述

字段类型说明
face_numint检测到的图片中的人脸数量
face_listarray[]人脸信息列表
face_tokenstring人脸的唯一标志

3.12、将接口所返回的检测结果在页面进行展示，这时候要用到一个循环把所返回的裁剪图进行遍历。
效果如下图，接口其中还有很多所返回的参数没有进行展示，有兴趣的小伙伴可以都试一下。

<view class="result" wx:if="{{isShowDetail}}">
  <view class="resultTitle">人脸数量：{{faceNum}}</view>
</view>
<image wx:for="{{face_list}}" src="data:image/png;base64,{{item.corp_image_base64}}" class="resultImg"></image>

在这里插入图片描述

四、完整代码

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
  <image src="../../images/xj.png"  class="btnImg"></image>
  上传图像
  </view>
  <view class="rightBtn" bindtap="identify">
  <image src="../../images/face.png"  class="btnImg"></image>
  人脸检测
  </view>
</view>
<view>
  <image src="{{reproduction}}" class="showImg"></image>
</view>
<view class="result" wx:if="{{isShowDetail}}">
  <view class="resultTitle">人脸数量：{{faceNum}}</view>
</view>
<image wx:for="{{face_list}}" src="data:image/png;base64,{{item.corp_image_base64}}" class="resultImg"></image>

<!--index.wxss-->
/* pages/pubu/index.wxss */
.containerBox{
  width:750rpx;
  display:flex;
  height:62rpx;
  margin-top:20rpx;
}
.leftBtn{
  display: flex;
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  background:#4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 108rpx;
}
.rightBtn{
  display: flex;
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 172rpx;
  background:#4FAFF2;
}
.btnImg{
  width:50rpx;height:50rpx;margin-top:6rpx;margin-left:6rpx;
}
.showImg{
  width:600rpx;
  height:400rpx;
  margin-left:75rpx;
  margin-top:50rpx;
  border-radius:10rpx;
}
.resultImg{
  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
            });
          }
        });
      }
    })
  },
    //人脸检测
  identify() {
    let that = this;
    let requestData = {
      'image': that.data.baseData,
      'image_type': 'BASE64',
      'max_face_num':120,
      'display_corp_image':1,
    };
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/json;'
      },
      data: requestData,
      success: function (identify) {
        console.log(identify);
        that.setData({
          isShowDetail: true,
          faceNum:identify.data.result.face_num,
          face_list:identify.data.result.face_list
        });
      }
    })
  },

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/3369.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2022年还在做手动测试？是该好好反思了

2022年还在做手动测试？是该好好反思了

为什么会写这篇文章呢&#xff1f;主要是前段时间有个朋友在QQ上和我交流&#xff0c;说他干了10年的手工测试了&#xff0c;现在还能不能转行。 说实话&#xff0c;当时我听完非常惊讶&#xff01;由此&#xff0c;我写了今天这篇文章。内容纯属个人观点&#xff0c;如果对你…
阅读更多...
STM32CubeMX学习笔记（46）——USB接口使用（HID自定义设备）

STM32CubeMX学习笔记（46）——USB接口使用（HID自定义设备）

一、USB简介 USB&#xff08;Universal Serial BUS&#xff09;通用串行总线&#xff0c;是一个外部总线标准&#xff0c;用于规范电脑与外部设备的连接和通讯。是应用在 PC 领域的接口技术。USB 接口支持设备的即插即用和热插拔功能。USB 是在 1994 年底由英特尔、康柏、IBM、…
阅读更多...
浅刷牛客链表题，逐步深入链表，理解链表

浅刷牛客链表题，逐步深入链表，理解链表

作者&#xff1a;渴望力量的土狗 博客主页&#xff1a;渴望力量的土狗的博客主页 专栏&#xff1a;手把手带你刷牛客 工欲善其事必先利其器&#xff0c;给大家介绍一款超牛的斩获大厂offer利器——牛客网 点击免费注册和我一起刷题吧 目录 1、反转链表 2、删除链表的倒数第n个…
阅读更多...
RocketMQ 消息重新投递 解析——图解、源码级解析

RocketMQ 消息重新投递 解析——图解、源码级解析

&#x1f34a; Java学习&#xff1a;Java从入门到精通总结 &#x1f34a; 深入浅出RocketMQ设计思想&#xff1a;深入浅出RocketMQ设计思想 &#x1f34a; 绝对不一样的职场干货&#xff1a;大厂最佳实践经验指南 &#x1f4c6; 最近更新&#xff1a;2022年11月4日 &#x…
阅读更多...
35、Java——一个案例学会Dao+service层对数据表的增删改查

35、Java——一个案例学会Dao+service层对数据表的增删改查

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;乐趣国学的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;Java案例分…
阅读更多...
deployment html---＞JDBC---＞mysql

deployment html---＞JDBC---＞mysql

spec: 相关属性定义 spec.selector: 符合该条件的收到该deployment管理 #spec.selector.matchLables 和 spec.template.metadata.labels 标签要一致 mysql Service metadata.name: Service的服务名 spec.ports: 虚拟端口 spec.selector: 哪些pod&#xff08;实列&…
阅读更多...
《Java》深浅拷贝解析（还不会区分深浅拷贝吗？快进来）

《Java》深浅拷贝解析（还不会区分深浅拷贝吗？快进来）

目录 一、深浅拷贝的意义 浅拷贝 深拷贝 二、深浅拷贝举例 浅拷贝 深拷贝 一、深浅拷贝的意义 首先我们来了解一下深浅拷贝的意义 浅拷贝 浅拷贝是会将对象的每个属性进行依次复制&#xff0c;但是当对象的属性值是引用类型时&#xff0c;实质复制的是其引用&#xff0c…
阅读更多...
全网最全【数据结构与算法】408真题实战（含代码+详解）—— 线性表专题（持续更新...）

全网最全【数据结构与算法】408真题实战（含代码+详解）—— 线性表专题（持续更新...）

线性表专题 每道题目均有对应的代码&#xff0c;大家自行查看哦&#xff01; 顺序表 ADT&#xff1a;SeqList 文件名&#xff1a;SeqList.hpp #include <iostream> #include <cstdlib> using namespace std; // 以上是实际运行所需依赖&#xff0c;考试不用写t…
阅读更多...
怎样编写裸片启动程序-ARMv8的Boot Code和ROM程序

怎样编写裸片启动程序-ARMv8的Boot Code和ROM程序

ROM程序就是固化在芯片的ROM里面&#xff0c;把应用程序从存储器里加载/搬移到RAM中并使处理器开始执行应用程序的一段程序 1 Boot Code和ROM程序 从多普通单核MCU&#xff08;如STM32&#xff09;的使用者的角度来看&#xff0c;只需要把编译好的hex文件烧写到片上Flash中&am…
阅读更多...
JavaScript(WebAPI) (前端）

JavaScript(WebAPI) (前端）

文章目录前言一、WebAPI二、DOM1.选中元素2.事件3.获取/修改元素内容4.获取/修改元素属性5.获取/修改表单元素属性6.操作复选框7.获取/修改样式属性①行内样式②通过css class 指定的样式8.新增节点9.删除节点总结前言 虽然学了一些js的语法,但是仍然无法写出页面的动态效果~~…
阅读更多...
【JavaScript高级进阶】构造函数和原型，学会prototype

【JavaScript高级进阶】构造函数和原型，学会prototype

目录 前言 1.构造函数和原型 1.1使用prototype解决内存浪费的问题 1.2constructor构造函数构造器构造函数 2.原型链 2.1js中成员查找规则 2.2原型对象this指向 2.3扩展内置对象 3.call作用 4.继承 4.1利用原型对象继承 写在最后 前言 哈喽哈喽大家好&#xff0c;因为…
阅读更多...
【Day1】零基础学java--》记事本运行java程序，通熟语言让你彻底明白为什么配置java环境变量

【Day1】零基础学java--》记事本运行java程序，通熟语言让你彻底明白为什么配置java环境变量

前言&#xff1a; 大家好&#xff0c;我是良辰丫&#xff0c;从今天开始我将协同大家一起从零基础学习Java&#xff0c;期待与君为伴&#xff0c;走向海的彼岸。&#x1f495;&#x1f495;&#x1f495; &#x1f9d1;个人主页&#xff1a;良辰针不戳 &#x1f4d6;所属专栏&a…
阅读更多...
C语言之数组练习题

C语言之数组练习题

第1关&#xff1a;数组插入元素 300 任务要求参考答案评论106 任务描述相关知识 数组数组元素的表示方法编程要求测试说明任务描述 本关需要你将一个数插入到一组已经排好序的数组并输出。 相关知识 数组在程序设计中&#xff0c;为了处理方便&#xff0c; 把具有相同类型…
阅读更多...
【C++】多态 — 多态的原理 （下篇）

【C++】多态 — 多态的原理 （下篇）

文章目录&#x1f4d6; 前言1. 虚函数表1.1 虚函数表的引入&#xff1a;1.2 基类的虚表&#xff1a;1.3 派生类虚表&#xff1a;2. 多态的原理2.1 多态虚函数的调用和普通函数的调用&#xff1a;2.1 - 1 到底什么是多态&#xff08;重点&#xff09;2.1 - 2 父类的指针实现多态…
阅读更多...
Allegro基本规则设置指导书之Analysis Modes

Allegro基本规则设置指导书之Analysis Modes

Allegro基本规则设置指导书之Analysis Modes 下面介绍基本规则设置指导书之Analysis Modes 点击set-up-constrains-Modes 调出Analysis Modes，这个是所有DRC的总开关 下面介绍常用的一些开关设置 Design Options (Soldermask) 从上往下 阻焊到阻焊的间距 阻焊到pad和走线…
阅读更多...
EasyCVR及智能分析网关在校园视频融合及明厨亮灶项目中的应用方案设计

EasyCVR及智能分析网关在校园视频融合及明厨亮灶项目中的应用方案设计

随着校园智能化需求的不断增长&#xff0c;越来越多的校园逐渐开始升级校园监控视频平台&#xff0c;将原先传统的视频监控系统&#xff0c;逐渐升级转变为灵活性强、视频能力丰富、具备AI检测能力、并能支持视频汇聚与统一管理的智能化校园综合管理平台。 在某学校的视频监控…
阅读更多...
MapReduce概述

MapReduce概述

MapReduce概述 MapReduce是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在一个Hadoop集群上。 MapReduce…
阅读更多...
【优化算法】鹈鹕优化算法（POA）（Matlab代码实现）

【优化算法】鹈鹕优化算法（POA）（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑…
阅读更多...
ARMv7/ARMv8/ARMv9架构你不知道的那些事

ARMv7/ARMv8/ARMv9架构你不知道的那些事

快速链接: . &#x1f449;&#x1f449;&#x1f449; 个人博客笔记导读目录(全部) &#x1f448;&#x1f448;&#x1f448; 付费专栏-付费课程 【购买须知】: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 以下仅代表个人观点&…
阅读更多...
七大排序算法——快速排序

七大排序算法——快速排序

AcWing算法专题——快速排序 文章目录AcWing算法专题——快速排序前言一、快速排序的核心二、算法图示三、算法代码四、算法详解1.递归停止的条件2.下标移动的实现3.下标初始值的设定4.边界情况分析4.1区间划分4.2 do while循环条件五、思考题总结前言 现在我们开始进入算法模块…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023