js点击按钮显示图片_【WebAR】开源项目2：微信小程序AR和Tensorflow.js实现人脸检测和人脸识别...

1、项目背景

2019年7月份使用计算机视觉库实现了人脸检测和图像跟踪，在真机上测试，Android微信运行的比较快，iOS微信非常慢。在微信小程序环境中，没有方法能提高Javascript的计算速度，除了利用WebGL。

WebGL backend，简称“webgl”，是在浏览器平台上最强大的一个backend。它比CPU backend要快100倍。部分原因是，Tensor是作为WebGL纹理保存的，数学运算操作实现在WebGL shader里面。——摘自Tensorflow.js官方指南

Tensorflow.js是一款利用WebGL进行深度学习的框架，可以直接运行在浏览器和NodeJS环境中，但不支持微信小程序。而tfjs-wechat是一款让Tensorflow.js运行在微信小程序的库。

这样，我们可以使用深度学习框架实现AR的功能了。本项目使用了人脸检测、人脸特征点检测、人脸识别等。

2、名词解释

人脸检测：在一幅图像中寻找人脸。

人脸特征点检测：在一幅人脸图像上寻找眼睛、鼻子、嘴巴等特征点。

人脸识别：在一幅图像上寻找人脸和判断人脸是谁。

3、小程序界面

首页分为Face Detecting和Face Recognition两个区域，两个区域的按钮点击后，会分别加载小程序的分包。既可以提高小程序启动速度，又可以将小程序2MB的大小限制提高到8MB。

4、人脸检测

需要检测的图片：

点击Face Detecting区域的按钮

打开界面时，先提示“loading model...”，后提示"warming up..."。等提示文字消失后，就可以点击“take a photo”按钮了。

"loading model..."提示：从github网站下载大约189KB的人脸检测和76KB的人脸特征点检测模型文件。

"warming up..."提示：Tensorflow.js进行第一次检测时，运行时间会很长。为了避免用户第一次检测时间过久，自动进行一次检测，称为预热。

拍照模式效果：

实时模式效果：

5、人脸识别

准备需要识别的人脸，一个或多个人脸。

被识别的人脸图片位置，可以替换成其他人脸。

/reference.jpg

/package_face_recognition/pages/camera/reference.jpg

/package_face_recognition/pages/photo/reference.jpg

点击Face Recognition区域的按钮

"loading model..."和"warming up..."提示与Face Detecting区域的相同，但要下载大约6.14MB的人脸识别模型文件。模型文件默认部署在github网站，下载速度非常慢，建议将模型文件部署到其他高速网络。

拍照模式效果：

实时模式效果：

6、内存管理

TensorFlow.js会在手机GPU里执行WebGL的shader程序，内存需要显式管理。

强调一下，在使用WebGL backend时，需要显式管理内存。因为存储Tensor的WebGL纹理，不会被浏览器的垃圾收集机制自动清理。调用dispose()清理tf.Tensor占用的内存。——摘自Tensorflow.js官方指南

7、开源项目地址

sanyuered/WeChat-MiniProgram-AR-TFJS​github.com