纯js实现的人脸识别，实现摇摇头，张张嘴

最新推荐文章于 2024-09-04 15:20:57 发布

小林——先生

最新推荐文章于 2024-09-04 15:20:57 发布

阅读量3.3k

点赞数 2

分类专栏：随笔文章标签： js css html

本文链接：https://blog.csdn.net/weixin_45205118/article/details/106484477

版权

这篇博客介绍了使用JavaScript实现人脸识别的基本功能，包括摇头和张嘴的检测，但目前还无法检测眨眼，并且在识别过程中存在一些小问题。作者分享了学习过程和部分源码。

摘要由CSDN通过智能技术生成

这个是我通过穆雄雄的博客，稍微的修改和调试，基本能够实现摇摇头，和张张嘴的功能，但是眨眨眼还没办法实现，以及识别时还会有点小问题。
所以记个学习心得。
话不多说，直接上代码

html 部分

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>人脸识别</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			body {
				text-align: center;
				background-color: rgba(0, 0, 0, 0~1);
			}
			.contentcss {
				text-align: center;
				margin: 0 auto;
				vertical-align: middle;
				background-color: rgba(0, 0, 0, 0~1)
			}
			
			.headcss {
				border: 1px solid red;
				width: 300px;
				height: 300px;
				background-color: wheat;
				margin: 0 auto;
				border-radius: 50%;
				overflow: hidden;
			}
			
			#style{
				font-size:25px;margin-top:20%;color: #FFFFFF;
			}
			.videocss {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				text-align: center;
			}
		</style>
	</head>

	<body style="background: rgb(2,2,2,0.5);">
		<div class="mui-content contentcss" id="content" style="background: rgb(2,2,2,0);">
			<div class="headcss" id="headdiv">
				<video id="video" class="videocss" autoplay width="300" height="300"></video>
				<canvas style="visibility:hidden;" id="canvas" width="300" height="300"></canvas>
			</div>
			<div id="style">请将头部对准摄像头</div>

			<div id="tip" style="display: none;"></div>
			<input type="hidden" id="result" />
			<div id="msg" style="display: none;"></div>
			<div id="positions"></div>
		</div>
	</body>

	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script src="js/utils.js"></script>
	<script src="js/numeric.js"></script>
	<script src="js/ccv.js"></script>
	<script src="js/clm