1。项目背景

2019年7月5日，微信开放式官方帐户宣布了微信小程序实现Web AR的基本API，该APL可以实时从相机中获取每个图像。但是，微信小程序不提供图像识别和面部检测功能。 .JS是一个轻巧的计算机视觉库，可以实现颜色跟踪，面部检测和其他功能。它是计算机视觉算法库，类似于图像算法。

该演示项目的源代码上面，请参阅文章末尾的地址。

2。准备步骤

使用微信开发人员工具导入源代码，单击工具栏上的“预览”按钮，然后扫描微信帐户以启动微信系列。如果“预览”按钮是可以灰色的，则需要为项目填写测试ID。

微信小程序将请求使用相机的权限并选择“允许”。如果选择“拒绝”并在小程序右上角的“设置”按钮中再次打开。

因为这是一个新的Mini API，所以的iOS版本需要7.0.4版，而的版本需要版本7.0.5。目前，大多数人还没有安装新版本的微信，因此他们可以选择在“采用”模式而不是“ A”模式下体验它。因为“采用”模式不使用新的API，因此在任何版本的微信中都可以使用。

3。如何使用

使用演示小程序，只需扫描此图片即可。您还可以用红色，黄色和蓝色扫描周围的东西。

成功扫描后的效果如下：

屏幕截图的“接收”模式

操作方法：单击“拿”按钮拍照，然后单击“再次拍照”。

“ A”模式的屏幕截图

操作方法：该页面将自动检测到相机屏幕中是否有紫色，黄色和蓝色，并且没有手动操作。

4。图像颜色跟踪的目的

尽管不可能根据颜色确定它是什么对象，但它可以将其与已知颜色的一堆对象区分开来。颜色分析比图像技术（例如大纲分析）快得多，但准确性较低。适用于准确性不高的场合。

5。面部检测

使用演示小程序进行扫描或图片。

成功识别后，将显示一个盒子，将显示31个特征点，例如眉毛，眼睛，鼻子，嘴和脸部轮廓。

单击“”按钮以切换和前置摄像头。

更新2019.8.1：实现透视转换的面孔。

透视化转化的脸部：当面部特征点不准确时，2D贴纸的位置不准确。

调整面部识别参数后，特征点变得靠近面部，并且2D贴纸的位置变得准确。

6。图像识别

图像识别分为两个部分，一个是公认的图像，另一个是通过实时拍摄照片或相机获得的图像。

有必要计算照片或相机图像中确定图片的位置，大小，旋转和其他转换。

确定的图片如下：

扫描旋转图像

预期结果如下：

半透明的黑色面膜层覆盖了已识别的图像。

扫描斜线图像

预期结果如下：

扫描锅和变焦图像

预期结果如下：

功能局限性：当前，它支持2D转换，例如图像的翻译，旋转，斜角和缩放。

更新的2019.8.1：实现了识别图片的透视转换。

扫描透视图转换的图片

预期结果如下：

7。对象跟踪（不建议）

在脸部，眼睛，嘴巴等上显示一个盒子。此功能的速度比面部识别速度慢，并且准确性差。这是.js的一个示例。

8。技术问题和解决方案

8.1覆盖本机组件和覆盖层以显示相机视频并显示信息。第一次打开小程序时，下面的组件将阻止上面的组件。

处理方法：分别为组件和组件设置CSS的Z-。

8.2实时获取相机图像。方法。该方法的数据值是类型。如何将其转换为图像的数据类型？

处理方法：图像对象= new（.data）;

8.3端口计算机视觉库需要进行哪些修改？

处理方法：微信小程序中不存在浏览器对象的总和，需要更换。 .js库无法访问小程序中的相机，因此需要将的摄像头数据发送到.js库。

8.4实时获取相机图像。对象的stop（）方法无法停止收听相机，即使您退出小程序页面也是没有用的。

重现步骤：启用侦听相机后，您可以在调试日志中看到.log记录的连续输出。然后，通知了调用的stop（）方法以停止，并且调试日志仍在输出.log记录。最后，单击左上角返回到退出页面，新页面上的小程序调试登录仍在输出.log记录。

const

处理方法：调用。的回调函数中的.js库，然后将其更改为使用计时器调用.js库。

const

8.5除了用计时器执行循环外，还有其他循环执行方法吗？

通常使用电子方法。它以前没有在迷你节目中提供，而仅在迷你游戏中提供。

现在，MINI程序添加了支持，并且也添加了.E方法。

9。图像识别的优化方法

9.1准备计时器

将计时器放置在方法调用之前和之后的位置，并记录在方法上所花费的时间。某些优化方法可能没有预期效应，可以通过计时器观察。

9.2提高识别速度

1。通常，预处理图像，例如灰度，模糊，边缘检测等。我测试了.blur（），。（），。（）和.js随附的其他方法，但结果并不理想。预处理后，总体识别时间也会增加。

测试结果：没有预处理时耗时。灰度之后，这需要时间。模糊之后，这需要时间。

2。通过减小图像的大小，效果显而易见。

测试结果：

图像宽度为375像素，耗时；

图像宽度为180像素，耗时；

图像宽度为90像素，耗时；

图像宽度为50像素，需要50ms。

3。图像大小的压缩方法，用于微信小组拍照

将图像绘制到画布上，然后使用画布调节图像大小。

ctx

4。压缩微信迷你程序的图像大小以实时获取相机的方法

2019.8.6更新：因为经常打电话给WX。将导致微信的版本崩溃，“ A”模式不再使用此压缩方法。

获得的相机图像是一种类型，而不是文件路径，而CTX。画布的方法不能绘制。

非官方的想法：首先使用WX将图像类型绘制到画布上。方法，然后使用WX生成临时文件。方法，然后使用CTX绘制临时文件。画布的方法。其余的与图像时的图像压缩方法相同。

wx

注意：此方法将反复创建临时文件，如果还有其他图像压缩方法，那就更好了。

9.3提高识别精度

1。标识的图像应与原始图像成正比。例如，原始图像的纵横比为4：3。为了在程序上显示出良好的外观，将图像拉伸到4：3.5的纵横比，无法正确识别拉伸图像。

2。固定图像大小时，.js库中面部检测和颜色检测的值越大，检测速度越快，但识别精度越低。两个值越小，检测速度慢，但识别精度越高。

3。当图像大小变化多次时，应根据图像大小分别调整.js库中的面部检测值和颜色检测值。例如，图像尺寸将从375像素宽，高458像素到宽50像素，高61像素。目前，脸几乎无法检测到，但是设置的值和值足够小以检测到面部。

9.4根据场景选择优化计划

当提高识别精度时，识别速度将降低；当识别速度提高时，识别精度将降低。在用户单击按钮拍摄照片的场景中，可以将识别精度设置为更高的级别。在实时从相机中获取图像的场景中，可以将识别精度设置为较低，以换取更快的识别速度。

9.5微信无法优化

微信系的主机环境分为两层：逻辑层在发动机上运行，​​并且渲染层在其上运行。迷你程序的计算速度比移动网页的计算速度要快一些。但是，当使用视觉计算时，计算时间将很长。

例如，在PC浏览器上计算图像转换需要300毫秒，并且在移动浏览器上计算此图像转换需要3秒钟。从视觉上讲，PC浏览器的速度比移动浏览器快10倍。在微信小程序中，您不能使用WASM加速度，也不能直接使用硬件加速度。此外，迷你程序的尺寸限制为2MB。

提示：表明面部检测所需的面部训练模型（.JS）的原始大小为4MB，并且包含4层模型。为了满足微信小程序的尺寸限制，将其更改为第1层模型。

10。开源代码地址/ -