结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode

news2025/6/26 12:42:40

系列文章目录

如何在前端项目中使用opencv.js | opencv.js入门
如何使用tensorflow.js实现面部特征点检测
tensorflow.js 如何从 public 路径加载人脸特征点检测模型
tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图
tensorflow.js 使用 opencv.js 将人脸特征点网格绘制与姿态估计线绘制结合起来，以获得更高的帧数
结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode

项目地址(github)：https://github.com/couchette/simple-react-face-fandmark-detection
项目地址(gitcode)：https://gitcode.com/qq_41456316/simple-react-face-fandmark-detection

文章目录

系列文章目录
前言
一、UI美化
- 1. 圆角+阴影
二、将 github 项目导入 gitcode
三、部署项目到InsCode
四、分享项目到CSDN博客
总结

前言

本篇文章将带您踏上一段令人兴奋的技术之旅，探索如何巧妙地结合了三个强大的技术工具——TensorFlow.js、OpenCV.js以及Ant Design，打造出令人眼前一亮的人脸动捕组件。您将在本文中深入了解如何利用这些工具，不仅令界面美观动人，同时也保持了出色的性能表现。更令人振奋的是，我们将分享如何将这一成果顺利发布到InsCode平台，让更多的人能够轻松享受到这一创新。准备好跟随我们的步伐，探索如何在技术与美学的交汇处创造出引人注目的作品！
本文将是该系列文章的结尾，将对整个ReactUI组件进行简单的美化，并将项目项目发布到GitCode和部署到InsCode中，感谢大家的陪伴。

一、UI美化

1. 圆角+阴影

对canvas 元素设置圆角borderRadius: "5px"使其看起来更加柔和
对canvas 元素设置阴影boxShadow: "2px 2px 5px #888888"使画面看起来更加具有层次感
使用 Ant Design 的 Selector 和 Button 组件，这些组件的默认样式都很好看
详细代码见 index.js，相关代码如下：

<canvas
          id="faceMesh"
          style={{
            position: "absolute",
            top: "0",
            bottom: "0",
            left: "0",
            right: "0",
            borderRadius: "5px",
            boxShadow: "2px 2px 5px #888888",
          }}
          ref={canvasRef}
          width={inputResolution.width}
          height={inputResolution.height}
        />

请添加图片描述

二、将 github 项目导入 gitcode

https://github.com/couchette/simple-react-face-fandmark-detection.git

输入需要导入的github项目的 git 网址，设置为开源项目（在InsCode部署项目需要设置为开源项目），点击导入项目按钮请添加图片描述
此时可以在 gitcode 仓库看到导入的项目，点击右上角的Clone按钮

选择HTTPS点击复制项目地址按钮，请保存复制的项目地址，部署项目到InsCode要用