微信小程序开发之颜值测试,调用百度AI人脸检测接口

时间:2024-04-05 11:13:01

​页面效果

微信小程序开发之颜值测试,调用百度AI人脸检测接口

插播一下,颜值71,还可以那么狂,哼。。。。。。。。

微信小程序开发之颜值测试,调用百度AI人脸检测接口

项目介绍

微信小程序开发之颜值测试,调用百度AI人脸检测接口

页面实现上传一张带有人像的图片,点击测试颜值之后返回照片中人像的年龄和颜值,此项目为颜值测试初级,access_token值为获取之后在页面中固定,注意有有效期30天,30天之后需要更换,未对生成数据进行处理和判断,适合刚开始接触的同学练习,之后会发布关于中级(对数据进行判断,动态获取access_token)和高级(生成颜值测试证书)的文章,有兴趣可以持续关注哦!

微信小程序开发之颜值测试,调用百度AI人脸检测接口

百度AI人像检测与属性分析

微信小程序开发之颜值测试,调用百度AI人脸检测接口

微信小程序开发之颜值测试,调用百度AI人脸检测接口

用户可以在线调用API,也可以离线采集SDK,还可以私有化部署,本例子是采用在线调用API,注册申请完就可以免费调用,每天有限额,只要不商用,仅本地测试和个人使用足够。

微信小程序开发之颜值测试,调用百度AI人脸检测接口

功能逻辑

微信小程序开发之颜值测试,调用百度AI人脸检测接口

wxml页面主要展示两部分内容,一部分用户上传图片的呈现,另一部分是测试结果的呈现,为了使得效果好看些,默认提供一张图片显示,在js的data中进行定义;测试结果呈现利用了progress进度条,具有一定的动态效果。用户上传图片功能的实现使用的是微信小程序自带的wx.chooseImage()方法,指定要上传图片的数量,大小和来源即可,上传成功后可以获得图片的临时路径进行赋值在wxml页面显示;百度人脸检测接口官方技术文档有比较详细的说明,要使用接口,须将图片进行base64格式编码,这里利用微信小程序的readFile()方法实现图片编码,通过request请求,传递image_type,image,access_token,face_field(由于人脸检测api默认是不返回年龄和颜值数据的,需要自行指定返回的数据),请求成功之后就可以获取所需数据。如果请求错误,服务器会返回错误码和错误信息,可以进行判断输出,本程序未进行判断,用户可以查阅官方文档,进行判断输出即可。

微信小程序开发之颜值测试,调用百度AI人脸检测接口

 

实现步骤

一:访问百度ai平台,注册账号,创建应用,生成API key和Secret key

https://ai.baidu.com/

开放能力-》人脸与人体识别-》人脸识别-》人脸检测-》立即使用-》创建应用

微信小程序开发之颜值测试,调用百度AI人脸检测接口

二:access_token获取

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=你自己的API key &client_secret=你自己的secret key

完善上述路径,修改成自己的API key和Secret key,将路径粘贴在浏览器中,回车查看结果

微信小程序开发之颜值测试,调用百度AI人脸检测接口

https://www.bejson.com/?src=xiaof微信小程序开发之颜值测试,调用百度AI人脸检测接口将返回的json字段格式化,获取到access_token的值并保存起来

三:页面完成

打开微信开发者工具新建beauty页面,撰写wxml和wxss页面,实现页面静态效果

微信小程序开发之颜值测试,调用百度AI人脸检测接口

微信小程序开发之颜值测试,调用百度AI人脸检测接口

四:完善js页面代码实现颜值检测功能

微信小程序开发之颜值测试,调用百度AI人脸检测接口

微信小程序开发之颜值测试,调用百度AI人脸检测接口

微信小程序开发之颜值测试,调用百度AI人脸检测接口

微信小程序开发之颜值测试,调用百度AI人脸检测接口

上图为人像检测返回数据,可以根据error_code的值进行判断上传的图片是否满足要求,否则给出提出,此文介绍为课上例子,已经跟学生介绍此功能,实践的同学可自行添加if语句进行判断。

 

如需源码,可关注以下公众号

微信小程序开发之颜值测试,调用百度AI人脸检测接口

后台回复“颜值测试小程序1”获取