`figlet`模块

官方文档

基本介绍:

figlet.js是一个能够帮助我们生成一个属于我们自己的banner这样的一个js库, 我们可以将其生成的banner应用到我们自己的项目中,这样就可以为我们的项目增加一些个人的印记了(一般是在项目运行的时候在控制台中输出banner),就好像下面一样:

基本使用:

安装包(node.js)

npm install figlet

使用语法:

figlet.text( parms,{options},function (err,data){})
// parms:需要格式化的字符串
// options:参数配置
// funtion(err,data):回调函数

参数介绍(options)
- Font : 字体(String)
- horizontalLayout : 布局(String)
- verticalLayout : 垂直布局(String)
- Width : 宽度(Number)
- whitespaceBreak : 换行(Boolean)
代码实例:

console.log(figlet.textSync('Fat-Lam', {
    font: 'Ghost',//字体为灵魂字体
    horizontalLayout: 'default',
    verticalLayout: 'default',
    width: 80,//宽度
    whitespaceBreak: true
}));

结果展示:

`asciify`模块

官方文档

基本介绍(与上面的`figlet`模块基本一致):

figlet.js是一个能够帮助我们生成一个属于我们自己的banner这样的一个js库, 我们可以将其生成的banner应用到我们自己的项目中,这样就可以为我们的项目增加一些个人的印记了(一般是在项目运行的时候在控制台中输出banner),就好像下面一样:

基本使用:

安装包(node.js)

npm install -g asciify

基本使用:

// 1.用法:(输入想要打印的字符串,选择字体和颜色)
asciify('fat lam',{font:'larry3d',color:'yellow'}, function(err, res){ console.log(res) });

// 2.获取支持的字体(输出能够引用的字体)
asciify.getFonts(function (err, fonts) { fonts.forEach( console.log ) })

结果展示

`face-api`模块

官方文档
视频教学

基本介绍(人脸识别库)

随着越来越多的复杂工具日渐成熟，图像识别的受欢迎程度继续增长。随着AI和计算机视觉技术的发展（事实上，由于互联网，我们现在可以获得大量数据），现在也可以在浏览器中进行人脸表情识别。
如今,正式向你介绍face-api.js,这是在TensorFlow.js（为JavaScript创建的流行的机器学习库）之上实现的JavaScript人脸识别库
Face-api非常容易使用。它具有强大的API，该API仅公开必要的配置，隐藏了所有底层，例如实际编写神经网络。除了不同的识别模型外，它还带有预建的绘图功能，因此我们不必弄乱画布。不仅如此,它还自带了许多model,我们只需要直接将训练好的model从github存储库中的weights文件夹下载模型下载过来即可,如下图所示:

基本使用:

安装包

npm i face-api.js

在项目中创建model文件夹用于存放训练好的模型

简单使用(表情检测,人脸识别,脸部描点):

前端页面(index.js)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script defer src="./face-api.min.js"></script>
  <script defer src="./script.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    canvas {
      position: absolute;
    }
  </style>
</head>
<body>
  <video id="video" width="700" height="500" autoplay muted></video>
</body>
</html>

js设置

const video = document.getElementById('video')//获取前端的video标签

Promise.all([//加载训练好的模型
  faceapi.nets.tinyFaceDetector.loadFromUri('./models'),//tinyFaceDetector算法
  faceapi.nets.faceLandmark68Net.loadFromUri('./models'),//脸部表情点位
  faceapi.nets.faceRecognitionNet.loadFromUri('./models'),//识别人脸模型
  faceapi.nets.faceExpressionNet.loadFromUri('./models')//表情识别模型
]).then(startVideo)//加载完成执行摄像头抓取图像

function startVideo() {//打开视频流
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

//给video标签绑定一个事件监听器,党video标签接收到电脑摄像头传过去的视频流时启动下面的函数
video.addEventListener('play', () => {
  // 创建画布
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)//将画布添加到dom中
  const displaySize = { width: video.width, height: video.height }//定义画布的宽高
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    // 设置检测多张脸(识别人脸,识别表情,识别脸部表情描点)
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks()
    .withFaceExpressions()
    
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    //清除上一张截取的图片中标出来的标志点和人脸识别框
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    faceapi.draw.drawDetections(canvas, resizedDetections)//画出人脸识别框
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)//显示脸上的标志点(画出五官)
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections)//显示表情
  }, 100)
}
)

实现人脸识别(视频中的人对比你提供的照片)

前端页面(index.js)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script defer src="./face-api.min.js"></script>
  <script defer src="./script.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    canvas {
      position: absolute;
    }

    video{
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <video id="video" width="700" height="500" autoplay muted></video>
  <button type="" id="stopTime">暂停定时器</button>
</body>
</html>

后端js

// 1.获取摄像头dom
const video = document.getElementById('video')
const stopTime = document.getElementById('stopTime')

// 2.加载人脸识别的库(模型)
Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('./models'),//人脸检测框
  faceapi.nets.faceLandmark68Net.loadFromUri('./models'),//脸部表情点位
  faceapi.nets.faceRecognitionNet.loadFromUri('./models'),//识别人脸
]).then(startVideo)//加载完成执行摄像头抓取图像

function startVideo() {//打开视频流
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

// 提供一个参照脸
const imgEle = document.createElement('img');
// imgEle.setAttribute('crossOrigin', 'anonymous')//允许图片跨域
imgEle.src = '../pic/pic1.jpg'

video.addEventListener('play', () => {
  stopTime.onclick = ()=>{
    clearInterval(timer)
  }
  var timer = setTimeout(async () => {
    // 1. 描述参照脸
    //加载tiny模型,识别快,但是精度有时候不高
    const  reference = await faceapi.detectSingleFace(imgEle, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks()//脸部描点
    .withFaceDescriptor()//脸部描述
    
    // 2. 描述视频流里面的脸
    //加载tiny模型,识别快,但是精度有时候不高
    const result = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks()//脸部描点
    .withFaceDescriptor()//脸部描述

    if (result) {
        // 3. 要执行人脸识别，可以使用 faceapi.FaceMatcher 来比较引用的人脸描述符和查询的人脸描述符。
        const faceMatcher = new faceapi.FaceMatcher(result)
        if (reference) {
          // 随后我们就可以使用 findBestMatch 来获取当前视频流中每一张人脸与参照脸对比而成的 欧氏距离
          const bestMatch = faceMatcher.findBestMatch(reference.descriptor)
          console.log(bestMatch)
          if(bestMatch._distance < 0.4){//设置最小欧氏距离(一般设置为0.4,小于0.4基本可以判断是同一个人)
            // clearInterval(timer)//清除定时器
            console.count('确定是同一个人!');
          }else{
              // clearInterval(timer)//清除定时器
              console.count('不是同一个人!');
          }
        }
    }
  }, 100)
}
)