2024年前端最新vue使用face-api进行人脸捕获(1)，面试官6个灵魂拷问

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

vue页面中的代码，你们自己使用核心的方法即可。

<template>
  <div>
    <el-dialog
      title="录入人脸"
      :visible.sync="showVideo"
      width="50%"
      :before-close="befClose"
    >
      <div style="position: relative">
        <video
          ref="videoRef"
          id="video"
          width="720"
          height="540"
          style="position: relative"
          autoplay
          muted
        ></video>
        <canvas class="can" ref="overlayRef" width="720" height="540"></canvas>
      </div>
      <div ref="snapshots" width="720" height="540"></div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as faceapi from "face-api.js";
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      showVideo: false,
      time: null,
    };
  },
  mounted() {
    // //人脸检测模型
    faceapi.nets.ssdMobilenetv1.loadFromUri("models");

    // 加载模型
    // faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
    //   faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
    //   faceapi.nets.faceRecognitionNet.loadFromUri("/models");
  },
  //方法集合
  methods: {
    show() {
      this.showVideo = true;
      // faceapi.nets.ssdMobilenetv1.loadFromUri("models");
      this.$nextTick(() => {
        const canvas = document.createElement("canvas");
        canvas.width = 720;
        canvas.height=540;
        // const canvas = this.$refs.overlayRef;
        // 设置画布上下文
        const ctx = canvas.getContext("2d");
        navigator.mediaDevices
          .getUserMedia({
            video: true,
          // video: { facingMode: { exact: "user" } },
          })
          .then((stream) => {
            video.srcObject = stream;
            //每一秒抓一张照片进行捕获人脸
            this.time = setInterval(() => {
              ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
              const img = new Image(canvas.width, canvas.height);
              img.src = canvas.toDataURL("image/png"); // 可以改为image/png或其他格式
              console.log(img);
              // this.$refs.snapshots.appendChild(img);
              // setInterval(() => {
              //   //照片检测人脸
              faceapi
                .detectSingleFace(
                  img,
                  new faceapi.SsdMobilenetv1Options({ minConfidence: 0.8 })
                )
                .then((result) => {
                  console.log(result);
                  const canvas = this.$refs.overlayRef;
                  const canvasCtx = canvas.getContext("2d");
                  if (result) {
                    //识别的边框画到视频上
                    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
                    const box = result.box;
                    const drawBox = new faceapi.draw.DrawBox(box, {
                      color: [255, 0, 0],
                      label: "face",
                    });
                    drawBox.draw(canvasCtx);
### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)