小程序实现人脸识别与小程序发布

article/2025/3/20 3:34:13

文章目录

  • 前言
  • 主要实现功能
  • 效果演示
    • PC端
    • 手机端
  • 调用百度Ai人脸检测接口
  • 小程序发布流程
  • 项目源码
  • 编程之外

前言

  人脸识别其实没那么复杂,我国几个大厂都有他们的AI开放平台,调用一下他们的人脸检测接口就行了😁(虽然接口不是自己写的🤣🤣),这期就分享:使用百度AI开放平台的人脸检测接口,在小程序中实现人脸识别。

主要实现功能

这个小程序主要实现了以下三个功能:

  • 拍照检测人脸
  • 前后摄像头切换拍照
  • 选择相册图片检测人脸

效果演示

PC端

  电脑只有前置摄像头,经过博主慎重考虑:为了不暴露自己不超50分的颜值,我把摄像头遮住了😂这里只演示选择图片检测人脸的功能,想查看其他功能的小伙伴可拿到自己电脑上运行尝试啊。
在这里插入图片描述

手机端

  别想多,相册里的图片是为了演示,临时去QQ看点找的😏😏
在这里插入图片描述

调用百度Ai人脸检测接口

百度AI开放平台官网:https://ai.baidu.com/ 点击控制台,需要有一个自己的账号登录
在这里插入图片描述
进入自己的控制台后点击左侧的人脸识别
在这里插入图片描述
要调用这个接口必须要先创建一个应用(免费的):
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
创建完毕
在这里插入图片描述
在这里插入图片描述


点进刚刚创建的应用,点击查看文档
在这里插入图片描述


点击API文档,要调用哪一个就选择对应的API文档,我们这里要使用的是人脸检测
在这里插入图片描述


如下,打开文档后,往下翻查看这个接口的调用方法和示例
在这里插入图片描述


根据官方API文档,要调用人脸检测接口主要分以下三步:

  • 获取Access Token(即 身份认证,使用上面创建应用时生成的API Key 和 Secret Key来获取Access Token)
  • 组织需要的参数
  • 发起请求,把参数发送到人脸检测API接口
    在这里插入图片描述

获取Token:把请求地址中的client_idclient_secret改成自己创建应用时得到的两个Key的值

getFaceInfo(){// 1. 获取tokenwx.request({method:'POST',url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=pDjn7G50rYxD6sNQVqYZ&client_secret=7ksZCDNLN99vaFEuIrPUV6zV',success:(res)=>{console.log(res)// 为 token 赋值this.setData({token:res.data.access_token},()=>{// 2.处理需要的参数this.processParams()})}})},

处理需要的参数

 // 2.处理需要的参数processParams(){const params={// 图片image:'',// 发送到服务器的图片格式,是 BASE64 格式的image_type:'BASE64',// 希望检测完毕后,服务器返回那些数据face_field:'age,gender,beauty,expression,glasses,emotion'}// 根据图片路径,把图片转为 BASE64 格式,然后,赋值给 params.imageconst fileManager = wx.getFileSystemManager()fileManager.readFile({// 要读取哪个文件filePath:this.data.src,// 以什么格式来读取指定的文件encoding:'base64',success:(res)=>{console.log(res)params.image=res.dataconsole.log(params)// 3. 发请求,获取检测结果数据this.testFace(params)}})},

发起请求,获取人脸检测结果数据

// 3. 发请求,获取检测结果数据testFace(params){wx.showLoading({title: '人脸检测中...',})wx.request({// 请求类型method:'POST',// 请求的地址url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token='+this.data.token,// 请求头header:{'Content-Type':'application/json'},// 请求体data:params,// 成功的回调函数success:(res)=>{console.log(res)if (res.errMsg === 'request:ok' && res.data.result !== null && res.data.result.face_num !== 0){console.log('人脸数据是:')console.log(res.data.result.face_list[0])this.setData({faceinfo: res.data.result.face_list[0]})}},// 完成后隐藏 Loading 提示complete:()=>{wx.hideLoading()}})},

小程序发布流程

  在本地编写好小程序后,想让别人也能使用你的小程序,就要将小程序发布上线。前提是:你开发的小程序是使用你的AppID创建。

点击上传
在这里插入图片描述
填一下项目信息,点击上传
在这里插入图片描述
  小程序上传后,登陆微信公众平台(官网:https://mp.weixin.qq.com/)进入小程序的管理后台,若要正式上线就点击提交审核,大概5天左右审核通过了,你的小程序就正式上线了
在这里插入图片描述


项目源码

  需要这个小程序项目源码的小伙伴,可以在我的公众号 遇见0和1 回复 人脸识别小程序 免费获取,我的公众号也会更新这方面的文章,欢迎小伙伴入坑一起成长喔😁😁
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

编程之外

愚人节快乐!虽然最近有些糟心事,但每次写文章,给自己进知识的时候我觉得也没那么糟糕了

每日毒鸡汤:
  毕竟,经历过人生的起伏,我们才慢慢看清了自己,看清了脚下的路。才知道了对自己来说什么最珍贵,也更加明白了如何去珍惜。
  也许,对十年前的自己来说,一切又都是值得的。因为,现在的自己,其实已经比过去,看得更远更辽阔。而下一个十年,也还会这样,继续生猛地走下去吧。
在这里插入图片描述
在这里插入图片描述

编程之外

http://chatgpt.dhexx.cn/article/qC2dbsrs.shtml

相关文章

节假日查询接口,加班,补班,日期查询,放假,日历

一、接口介绍 通过本数据,可以查询节假日、加班日期,以及每个日期的对应的国际日和我国传统节日的简介。广泛使用于日程安排、证券投资、日历等功能的应用中展示。 二、使用案例截图 如何查看调用效果? 1、通过链接,点击【在线…

php中阿里云快递物流查询接口使用

php中阿里云快递物流查询接口使用 官方给的php代码如下: $host "https://ali-deliver.showapi.com";$path "/showapi_expInfo";$method "GET";$appcode "你自己的AppCode";$headers array();array_push($headers, &qu…

智能疾病查询接口

疾病类目,疾病症状,智能疾病查询,医疗知识图谱 ​ 一、接口介绍 最全的疾病大全,收集了数万种常见疾病,任何常见疾病都可查询。 二、功能体验 三、演示效果 四、API文档 4.1 查询疾病科目 4.1.1接入点说明 查询…

调用阿里API获取城市天气信息

目录 一.阿里云天气预报API接口介绍2.1阿里云天气预报API介绍2.2 调用API准备工作及认识 二.调用天气预报API三.代码实现四.结果展示五、问题与解决办法 赵继涛,男,西安工程大学电子信息学院,20…

如何调用showapiRequest解决图片验证码识别?

一、思路(我埋了一个坑) (1)保存整张登录页面的图片 (2)剪切验证码区域的图片 (3)调用showapiRequest识别剪切好的图片 二、保存整张图片 保存当前页面的整张图片括号里面是保存图…

天气预报

到目前为止,我们的公众号已经可以回复用户发出的消息,但是如果仅仅如此,就没必要设为开发模式了。完全不懂编程的人也可以在微信公众平台上设置回复用户的消息。 现在我们来实现我们的公众号查询全国各个城市天气这么一个功能,像公众号输入天气+地名(天气南京)就可以查询…

天气预报查询数据接口、实时天气、未来24小时、7天/15天预报

小编在此向大家介绍拥有105亿调用量的产品,该接口文档清晰,对接方便,服务超好。 一、接口介绍 通过坐标区域、IP、地名、景点名称、电话区号或邮编等有效信息可查询天气情况(天气状况、湿度、天气图标、实时温度、风向、风级、紫…

php如何调用天气预报api,PHP调用API接口实现天气查询功能的示例

php 的 PHP调用API接口实现天气查询功能的示例 天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口、百度天气预报接口、google天气接口、Yahoo天气接口等等。 1、查询方式 根据地名查询各城市天气情况 2.请求…

微信公众号开发_调用新闻查询接口_回复图文消息

文章目录 一、新闻API接口返回的Json示例实体类测试类测试 二、发送图文消息xml数据格式实体类创建自定义菜单处理点击事件查询新闻工具类 仓库代码地址关注微信公众号 发送效果: 一、新闻API接口 使用的是阿里云市场的服务 全国热门带正文新闻查询API接口 使用方式…

全国(全球)快递查询物流查询API,物流信息追踪接口

一、接口介绍 支持国内外1500快递物流公司的物流跟踪服务,包括顺丰、圆通、申通、中通、韵达等主流快递公司。同时,支持单号识别快递物流公司、按次与按单计费、物流轨迹返回等功能,以满足企业对快递物流查询多维度的需求。 二、使用案例截…

历史上的今天

一、接口介绍 看看历史上的今天,都发生了什么重大事件。查历史上的指定日期发生的事情,包括国家大事、国际大事、政府重要决策部署等图文详情内容,不断增加中。 二、使用示例截图 { "showapi_res_error": "", "sh…

3-性能测试知识面

脚本开发相关 根据不同协议,选择不同工具 协议 httpjdbcsoapwebsocketdubboMQ 工具 Jmeter「线程」loadrunner「进程、线程(默认)」wrkabngrinder「jpython、groovy」locust「协程」 扩展 Jmeter支持的语言: javapythonjythongroo…

天气预报查询数据接口、实时天气、24小时天气、未来24小时、7天/15天预报

小编在此向大家介绍拥有105亿调用量的产品,该接口文档清晰,对接方便,服务超好。 一、接口介绍 通过坐标区域、IP、地名、景点名称、电话区号或邮编等有效信息可查询天气情况(天气状况、湿度、天气图标、实时温度、风向、风级、紫…

百度html的json解析,百度调用API返回json数据解析

在这里支队返回数据解析,不做请求数据​ 第一种格式json解析​ ​String jsonresult ”{"showapi_res_code":0,"showapi_res_error":"","showapi_res_body":{"list":[{"ct":"2016-02…

tp5 对接万维易源ISBN接口

首先购买万维易源的一元套餐 下面都有详细的说明 接口返回的数据格式是 {"showapi_res_error": "","showapi_res_code": 0,"showapi_res_id": "","showapi_res_body": {"datas": [{"series"…

全国天气预报查询接口

小编在此向大家介绍拥有105亿调用量的产品,该接口文档清晰,对接方便,还有服务很好。 一、接口介绍 通过坐标区域、IP、地名、景点名称、电话区号或邮编等有效信息可查询天气情况(天气状况、湿度、天气图标、实时温度、风向、风级…

对接阿里云天气,获取天气预报数据

我最近在开发个人网站,为了丰富页面,就新增了一个天气预报的数据展示,写此博客记录一下。 获取天气数据调用的易源数据天气,需要经纬度的参数,因此这里调用了百度地图的api来获取经纬度。具体实现过程如下&#xff1a…

欧美明星,明星照片,韩国明星,街拍照片

一、接口介绍 海量照片,每日更新。根据用户搜索关键词,同时整合几十个网站同一种类照片,返回推送列表。 图片种类包括 性感、车模、男色图片、模特美女、美女魅惑、日韩美女、秀场、中国明星、欧美明星、中国女明星、中国男明星、韩国明星…

ShowAPI识别验证码

ShowAPI识别验证码 首先官网上有些代码需要我们修改 需要将img改为image否则会出现如下报错: 其次我们需要将URL 后面的184-5改为184-4 最后就是我们执行成功的代码: #codingutf-8 import requests from coderecognize.ShowapiRequest import Showap…

微信小程序查询接口

小程序,微信 一、接口介绍 查询已经上架在微信的小程序,放回基本信息、关注人数、二维码、截屏等。使用该接口请将相关图片下载本地使用,不支持直接引用。 如何调用查看效果? 1、点击【在线调试】,如下图所示 2、点…