小程序颜值计算器
本款小程序纯属娱乐,里面的评分笑笑就好。
本项目主要实现了以人脸检测API调用的面部识别功能,开发过程中有几个坑点和处理方式记录下:
- 小程序接口几乎都是异步处理,所以代码的回调非常多,不怕麻烦的用promise包装下,写起来好看点。
- 因为国内某些可用的图床被微信封掉了,所以图片不能通过URL的方式传入API,只能在客服端BASE64处理再上传,如果谁有自己的图床可以改为uploadfile的方式,代码中注释掉了这个函数,使用这种方式就不需要进行下面的图片压缩了
- 功能里主要的图片上传需要做压缩处理,不然图片过大,请求时间会很长,用户等待时间过长,体验不好,所以项目根据不同的图片大小设置了不同的压缩比,保证图片上传到API的识别率的同时,平衡了等待结果的时间,这块可以再做优化。
- 图片压缩中,需要利用canvas进行图片重绘的原理,等比例尺寸压缩。处理过程如下:
- 先用wx.getImageInfo获取图片信息。
- 用wx.canvasDrawImage画图。
- 用wx.canvasGetImageData获取图片二进制数据。
- 最后用第三方包upng进行base64编码
- 结果展示页面有两种方式可选:
- 是不做任何人脸标记的全图展示,这个很简单,不做说明。
- 另一种是对检测到的人脸做出标记。这里可以分为两种方案:
- 在原图上人脸部位画框,展示页面只展示原图,下面为对应人脸的检测文本数据。
- 根据原图,把检测到的人脸分别用canvas画出来,放入不同的展示页,考虑到展示效果,本项目使用这种方式
- 在选上述第二种方案展示画图时,需要注意API返回的人脸位置数据是经过压缩的,所以要准确的画图,需要根据压缩比还原位置数据,还需要考虑的是脸部展示的范围,一般人脸检测的位置都是从眉毛到嘴部以上和两边耳朵的位置,为效果需要调整这个位置框稍微大于原始位置框。
本项目是穷人的开发方法,客户端的图片处理导致渲染速度不是很理想,如果各位都是壕,服务器域名走起就行了。
欢迎使用本项目作为大家的小程序插件,下面是已经上线的版本,祝各位扫扫感受到世界满满的恶意~~~~