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

页面效果

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

项目介绍

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

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

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

功能逻辑

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

实现步骤

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

https://ai.baidu.com/

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

二：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，将路径粘贴在浏览器中，回车查看结果

https://www.bejson.com/?src=xiaof将返回的json字段格式化，获取到access_token的值并保存起来

三：页面完成

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

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

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

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

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

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

调用百度ai人脸检测接口
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.人脸检测是什么? 二.使用步骤 1.引入库 2.分包操作 3.添加自定义MyApplication 4.Netwo ...
微信小程序开发之天气预报，调用百度天气接口，显示温馨提示和之后的天气
效果预览页面功能介绍此天气预报功能首先获取用户当前位置城市名,对于获取当前位置城市名和百度天气ak申请有疑问可以参考之前文章,然后根据城市名调用百度天气接口返回天气各项数据,最后对返回的数据进行处 ...
微信小程序实现图林机器人聊天和百度AI语音识别的简单人工客服
用微信小程序实现简单的人工客服最近在做软件工程的课程设计,选择性的做了微信小程序的简单的人工客服.在这里对该课程设计的原理和实现进行一个讲解,也算做一个总结和笔记,方便自己以后查看.复习和帮助大家的 ...
微信小程序开发前准备
微信小程序开发前准备前期准备开发者工具聚合免费API接口开发者账号注册文件解析 1.app.js是小程序的脚本代码.程序的主体代码主要在这个文件中实现.这个文件中包括小程序的生命周期函数 ...
微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
ui测试怎么做?依据文档有哪些_微信小程序开发流程有哪些？各个环节注意事项...
微信小程序开发流程有哪些?各个环节注意事项是什么?微信小程序开发有哪些注意事项,开发流程是怎样的?下面就一起来看看吧. 1.微信小程序开发之注册小程序在开发小程序之前,首先就是要注册一个小程序.不过 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
一个微信小程序开发示例
一个微信小程序开发示例(豆瓣电影) 新版本(不包含工作流)请移步至:https://github.com/zce/weapp-douban 当前仓库会暂缓更新,主要留下来给大家答疑需要基础教程的朋友 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...

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

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

最新文章

热门文章