基于人脸识别的智能服饰搭配小程序

基于人脸识别的智能服饰搭配小程序

(一) 技术方案
开发工具：微信小程序开发者工具
美术风格定位：白色和红色为主要颜色搭配界面，美观，调理清晰，完美兼容ios系统和安卓系统。设计元素上强调抽象、极简、符号化，去除冗余的装饰效果突显小程序的文字图片等信息内容。
所用技术：
前端：框架语言wxml，逻辑语言JavaScript，wxss样式；
数据交换格式：json；
服务器：小程序云服务器；
云开发：小程序云——云开发，云数据库，云函数，云储存；（.node格式）
所用Api：微信小程序原生api，百度人脸识别api
样式库：vant（轻量，可靠的移动端vue组件库）
开发框架：mpvue

(二) 效果展示

1.第一次进入小程序会有授权登录页面，在授权登录页面会对该小程序主要的功能和人脸识别实现原理进行介绍；获取用户信息授权登录使用:bindgetuserinfo

2.点击授权登录之后会进入BMI（身体质量指数）检测页面，输入身高和体重后根据算法计算出BMI值从而检测出体型（偏瘦，正常，过重，肥胖），将结果储存到微信缓存里。储存进微信缓存使用微信原生api：wx.setStorageSync，弹窗使用wx.showmodal。BMI计算公式：BMI=体重（千克）/（身高（米）*身高（米））

3.检测完体型之后点击确定会进入人脸识别界面，人脸识别界面分别有人脸追踪功能和人脸识别功能，人脸识别可识别出用户脸型，识别成功后将识别结果储存到微信缓存里。
功能实现简要流程：

人脸追踪：使用定时调用函数setInterval()每500毫秒调用自定义方法takephoto（），takephoto方法调用wx.createCameraContext()调用当前设备摄像头，调用api：wx.getimageinfo（） 获取图片真实宽高和路径wx.getFileSystemManager().readFile（）根据路径将图片的编码格式变为“BASE64“ 将图片通过wx.request发送到百度云人脸位置识别接口，成功将返回图片的宽高，最后使用微信api：wx.drawCavans根据百度云人脸位置识别结果绘制画布，让用户能够直观的看到人脸的位置（如下图），每500毫秒显示一次位置。
人脸识别：功能主要实现和人脸追踪功能类似，调用百度云人脸属性识别接口。

4. 人脸识别成功之后点击进入主页面，主页面有对衣服和裤子的细分类和风格推荐功能，用户可以选择自己喜欢的服饰加入衣柜。
   主页面主要使用样式wxss比较多，底部tabbar有“首页“，”我的衣柜“，”我的信息“三部分首页中一共有十四个点击事件，其中三个是tabbar，一个是搜索页面链接，十个是服饰引索（裤子衣服，风格推荐如下图），服饰引索根据点击的按钮不同，给某个全局变量赋不同的值，根据这个全局变量的值在进入服饰列表页面时调用数据库不同的数据，在wxml页面中遍历出服饰信息从而在服饰列表页面显示不同的服饰信息（图片，服饰名称，价格）。
   
   
   

5. 选择了完自己喜欢的服饰之后点击进入衣柜可查看之前加入衣柜的服饰，“我的衣柜”页面里有删除服饰和进入淘宝购买页面的功能。
   由于调用数据库信息后，数据存储结构类型是数组类型，用户点击“加入衣柜”按钮时，获取e.currentTarget.dataset.id的值取得当前遍历数组下标，再通过wx.setStorageSync将当前服饰信息存储到微信缓存中，进入“我的衣柜”时会通过：wx.getStorageSync取得服饰信息缓存，调用数组中相关下标取得服饰图片，名称，价格，购买链接，将图片名称，价格显示再页面中，点击“前往购买”会调用该服饰的购买链接进入淘宝页面。点击删除按钮会删除该服饰的全部信息并刷新页面，实现删除的功能。具体实现是把该数组下标元素之后的全部元素向前移动一个单位，实现删除信息。缓存数组如下图：

6. 首页的上面有商品搜索功能，进入商品搜索页面输入相应字符，系统会引索出相应的信息。
   
   

7. 最后是“我的信息”页面，用户对该小程序进行授权之后，小程序调用相应的api获取用户的头像，账号，微信名称，性别显示在页面上，之前检测的体型和脸型也会显示在页面上，最下面有“服装推荐”按钮，点击该按钮之后根据用户的体型，脸型，性别调用数据库相应的数据进入商品列表页面，为用户提供适合自己的服饰。“服装推荐”按钮也类似首页的风格推荐按钮，根据体态，性别，脸型的不同，给某一全局变量赋值，调用相应的服饰信息。
   
   

8，更多截图
云数据库截图：

云存储截图：

百度云人脸识别控制台截图：