人脸技术相关



![image.png](https://seek.wiki/static/img/ac990de6cb1c89b1fab0a20d2bb5ef2f.image.png)

1. MediaPipe Face Mesh是一个解决方案，即使在移动设备上也能实时估计468个3D面部地标。它使用机器学习（ML）来推断3D面部表面，只需要一个摄像头输入，而无需专用的深度传感器。该解决方案利用轻量级模型架构以及整个管道中的GPU加速，为实时体验提供了至关重要的实时性能。

    ```js
    import '@mediapipe/face_mesh';
    import '@tensorflow/tfjs-core';
    import '@tensorflow/tfjs-backend-webgl';
    import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';
    ```

2. 创建人脸模型

    引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
    2.1 maxFaces 默认为1。模型将检测到的最大人脸数量。返回的面孔数量可以小于最大值（例如，当输入中没有人脸时）。强烈建议将此值设置为预期的最大人脸数量，否则模型将继续搜索缺失的面孔，这可能会减慢性能。<br>
    2.2 refineLandmarks 默认为false。如果设置为真，则细化眼睛和嘴唇周围的地标坐标，并在虹膜周围输出其他地标。（这里我可以设置false，因为我们没有用到眼部坐标）<br>
    2.3 solutionPath 通往am二进制文件和模型文件所在位置的路径。(强烈建议将模型放到国内的对象存储里面，首次加载可以节省大量时间，大小大概10M)<br>

    ```js
    async createDetector(){
        const model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
        const detectorConfig = {
            maxFaces:1, //检测到的最大面部数量
            refineLandmarks:false, //可以完善眼睛和嘴唇周围的地标坐标，并在虹膜周围输出其他地标
            runtime: 'mediapipe',
            solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh' 
            //WASM二进制文件和模型文件所在的路径
        };
        this.detector = await faceLandmarksDetection.createDetector(model, detectorConfig);
    }
    ```
    
    ![image.png](https://seek.wiki/static/img/e6290656c634408e227eb8fe2903d15a.image.png)
    
3. 人脸识别
    
    返回的面孔列表包含图像中每个面孔的检测面。如果模型无法检测到任何面孔，列表将是空的。 对于每个面，它包含一个检测到的面孔的边界框，以及一个关键点数组。MediaPipeFaceMesh返回468个关键点。每个关键点都包含x和y，以及一个名称。<br>
    > 现在，您可以使用探测器来检测人脸。estimateFaces方法接受多种格式的图像和视频，包括：
    > HTMLVideoElement、HTMLImageElement、HTMLCanvasElement和Tensor3D。
    > flipHorizontal 可选。默认为false。当图像数据来自相机时，结果必须水平翻转。

    ```js
    async renderPrediction() {
        var video = this.$refs['video'];
        var canvas = this.$refs['canvas'];
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        const Faces = await this.detector.estimateFaces(video, {
            flipHorizontal:false, //镜像
        });
        if (Faces.length > 0) {
            this.log(`检测到人脸`);
        } else {
            this.log(`没有检测到人脸`);
        }
    }
    ```
    该框表示图像像素空间中面部的边界框，xMin、xMax表示x-bounds、yMin、yMax表示y-bounds，宽度、高度表示边界框的尺寸。
    对于关键点，x和y表示图像像素空间中的实际关键点位置。z表示头部中心为原点的深度，值越小，键点离相机越近。Z的大小使用与x大致相同的比例。
    这个名字为一些关键点提供了一个标签，例如“嘴唇”、“左眼”等。请注意，并非每个关键点都有标签。
    
4. 如何判断
    
    找到人脸上的两个两个点
    第一个点 额头中心位置 第二个点 下巴中心位置
    
    ```js
    const place1 = (face.keypoints || []).find((e,i)=>i===10); //额头位置
    const place2 = (face.keypoints || []).find((e,i)=>i===152); //下巴位置
    /*
                  x1,y1
                    |
                    |
                    |
      x2,y2  -------|------- x4,y4
                  x3,y3
     */
     const [x1,y1,x2,y2,x3,y3,x4,y4] = [
          place1.x,place1.y,
          0,place2.y,
          place2.x,place2.y,
          this.canvas.width, place2.y
     ];
    ```
    通过canvas.width 额头中心位置和下巴中心位置计算出 x1,y1,x2,y2,x3,y3,x4,y4
    
    ```js
    getAngle({ x: x1, y: y1 }, { x: x2, y: y2 }){
        const dot = x1 * x2 + y1 * y2
        const det = x1 * y2 - y1 * x2
        const angle = Math.atan2(det, dot) / Math.PI * 180
        return Math.round(angle + 360) % 360
    }
    const angle = this.getAngle({
            x: x1 - x3,
            y: y1 - y3,
        }, {
            x: x2 - x3,
            y: y2 - y3,
        });
    console.log('角度',angle)
    ```
    
    ![image.png](https://seek.wiki/static/img/339f049f2cdc20cf69eb11f923b6ed67.image.png)

    通过获取角度，通过角度的大小来判断左右摆头。

js人脸相关探索

使用canvas实现电子签名并保存生成png图片



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <div>
        <button onclick="cancel()">取消</button>
        <button onclick="save()">保存</button>
    </div>
</body>
<script>
    // 配置内容
    const config = {
        width: 400, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: 'red', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }

    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = canvas.getContext('2d')

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );

    // 保存上次绘制的 坐标及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }

    // 判断是否为移动端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

    // 初始化
    const init = event => {
        // 获取偏移量及坐标
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 

        // 修改上次的偏移量及坐标
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctx.beginPath()
        // 根据配置文件设置相应配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin
        // 设置画线起始点位
        ctx.moveTo(client.endX, client.endY)
        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
    // 绘制
    const draw = event => {
        // 获取当前坐标点位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最后一次绘制的坐标点
        client.endX = pageX
        client.endY = pageY

        // 根据坐标点位移动添加线条
        ctx.lineTo(pageX , pageY )

        // 绘制
        ctx.stroke()
    }
    // 结束绘制
    const cloaseDraw = () => {
        // 结束绘制
        ctx.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
    }
    // 创建鼠标/手势按下监听器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
    // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
    
    // 取消-清空画布
    const cancel = () => {
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)
    }
    // 保存-将画布内容保存为图片
    const save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            // 获取当前时间并转成字符串，用来当做文件名
            const date = Date.now().toString()
            // 创建一个 a 标签
            const a = document.createElement('a')
            // 设置 a 标签的下载文件名
            a.download = `${date}.png`
            // 设置 a 标签的跳转路径为 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手动触发 a 标签的点击事件
            a.click()
            // 移除 a 标签
            a.remove()
        })
    }
</script>
</html>
```

电子签名的canvas实现

模拟点击首先要区分是点击dom本身还是在点击dom节点上的指定位置

```js
// 先来抓取一下全局的点击事件吧
document.addEventListener("click", (e) => {console.log(e, '监听点击')})
```



1. 模拟点击dom

```js
document.querySelector("#id").click()
```

2. 点击dom节点上的指定位置

在上面的代码中，首先获取需要点击的元素和坐标位置。然后，创建一个 MouseEvent 对象，设置事件类型为 'click'，并指定触发事件的坐标位置。最后，使用 dispatchEvent 方法在指定元素上触发该事件。

```js
/*
* domId 为dom的id类名
* 获取需要点击的坐标位置
* x = 横坐标 y = 纵坐标
* type 为点击类型
* */
function eventDomClick (domId, x, y, type) {
    // 获取需要点击的元素
    const element = document.getElementById(domId);
    // 创建模拟点击事件对象
    const clickEvent = new MouseEvent(type ? type : 'click', {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: x, // 横坐标
        clientY: y, // 纵坐标
        button: 0, // 左键点击
    });
    // 在指定坐标位置触发点击事件
    element.dispatchEvent(clickEvent);
}
```

当然，这里涉及一个isTrusted授信问题

> 如果您在使用 JavaScript 时遇到了 isTrusted 属性为 false 的事件，这通常表示该事件是由浏览器或 JavaScript 本身产生的，而不是由用户与页面交互产生的。这可能是由于某些原因导致事件冒泡或捕获不正确，或者事件处理程序在错误的上下文中被调用。
> 
> 解决这个问题的方法取决于具体情况，以下是一些可能的解决方案：
> 
> 1. 检查事件处理程序是否正确绑定：确保事件处理程序已正确绑定到 DOM 元素。您可以使用浏览器的开发者工具来检查事件处理程序是否已绑定到正确的元素。
> 2. 检查事件冒泡是否正确：如果事件处理程序绑定到父元素而不是子元素，则可能需要使用 event.stopPropagation() 方法来阻止事件冒泡到父元素。
> 3. 检查事件捕获是否正确：如果事件处理程序绑定到子元素而不是父元素，则可能需要使用 event.stopImmediatePropagation() 方法来阻止事件被捕获到父元素。
> 4. 检查事件处理程序是否在正确的上下文中被调用：如果您在事件处理程序内部使用 setTimeout 或 setInterval 等方法，则可能需要在全局作用域中调用它们，以确保它们在正确的上下文中被执行。
> 5. 更新浏览器或操作系统：某些问题可能是由于浏览器或操作系统版本过旧导致的。尝试更新您的浏览器或操作系统版本，看看是否解决了问题。
> 
> 如果以上方法都无法解决问题，您可以尝试在开发者工具中调试代码，以查看是否有其他错误或异常情况导致 isTrusted 属性为 false。

关于模拟点击的研究

```js
Page({
  onLoad: function (options) {
    // 监听抖音小程序广告
    tt.createInterstitialAd({
      adUnitId: 'xxxxx',
      onClose: function () {
        console.log('onClose')
      },
      onError: function (err) {
        console.log('onError', err)
      },
      onReady: function () {
        console.log('onReady')
      },
      onTap: function () {
        console.log('onTap')
        // 发送广告点击信息
        tt.reportAnalytics('ad_click', {
          ad_id: 'xxxxx',
          ad_name: 'test_ad'
        })
      },
      onDownloadStart: function (res) {
        console.log('onDownloadStart', res)
        // 发送广告下载开始信息
        tt.reportAnalytics('download_start', {
          ad_id: 'xxxxx',
          ad_name: 'test_ad'
        })
      },
      onDownloadSuccess: function (res) {
        console.log('onDownloadSuccess', res)
        // 发送广告下载成功信息
        tt.reportAnalytics('download_success', {
          ad_id: 'xxxxx',
          ad_name: 'test_ad'
        })
      },
      onDownloadFailed: function (res) {
        console.log('onDownloadFailed', res)
        // 发送广告下载失败信息
        tt.reportAnalytics('download_failed', {
          ad_id: 'xxxxx',
          ad_name: 'test_ad'
        })
      },
      onInstalled: function (res) {
        console.log('onInstalled', res)
        // 发送应用安装信息
        tt.reportAnalytics('app_installed', {
          app_name: 'test_app'
        })
      }
    })
  }
})
```

在上面的示例中，我们使用 tt.createInterstitialAd 创建了一个插屏广告实例。在广告实例的 onTap 回调函数中，我们使用 tt.reportAnalytics 报告了广告点击信息。在广告实例的 onDownloadStart、onDownloadSuccess、onDownloadFailed、onInstalled 回调函数中，我们分别使用 tt.reportAnalytics 报告了广告下载和应用安装的信息

关于抖音小程序广告监测方法实例

在使用 Web 字体时，我们可以采用以下一些优化方案：



## 使用适当的字体格式：

Web 字体通常以 TrueType（TTF）或 OpenType（OTF）格式提供。TTF 字体文件较小，加载更快，但 OTF 格式支持更多的字形和格式，使得文本在不同的浏览器和操作系统上都能有相同的呈现效果。

## 使用字体服务：

字体服务如 Google Fonts 和 Typekit 提供了大量的 Web 字体，用户访问网站时可以直接从这些服务获取字体。字体服务允许网页设计者在不增加网页负担的情况下使用更多的字体，同时能够保证字体的质量和流畅性。

## 字体预加载：

在加载网页时，浏览器默认不会预加载字体，因此当字体首次出现时需要进行下载，从而造成了加载时间的延长。为了避免这种情况，我们可以通过在 HTML 中添加 preload 标签来预加载字体，这样在用户浏览到使用该字体的内容之前就已经下载好了。

## 字体子集化：

下载整个字体文件会增加带宽和加载时间。为了减少这种情况，我们可以通过字体子集化的方式，只下载使用到的字形，可以减少下载字体文件的大小。

## 合理的字体选择：

选择合适的字体，对保证网页内容的可读性和美观性非常重要。一般来说，应该选择易于阅读、在不同设备和浏览器中呈现效果良好的字体。同时，也要避免使用太多不同的字体，以免影响页面的整体风格和视觉感受。