大家好，我们将研究如何使用常规 Javascript、HTML Canvas 和 OpenCV.js 库从图像中检测人脸。
让我们先看一些例子，然后我们将继续编写代码并解释

如果您需要查看完整的代码库刚刚获得我的 github 存储库 
GitHub - reactcodes/face-detection-javascript-opencv: Multiface detection using Javascript and OpenCVMultiface detection using Javascript and OpenCV. Contribute to reactcodes/face-detection-javascript-opencv development by creating an account on GitHub.https://github.com/reactcodes/face-detection-javascript-opencv

如果您尚未完成 opencv 设置，请访问 https://docs.opencv.org/3.4 .0/d4/da1/tutorial_js_setup.html

现在让我们了解一下代码：
我采用了一个 HTML 模板，其中有我的示例 img 容器，然后我在不同的 div 中有 2 个 html 画布

<div class="container"><div id="background" class="o_image"><img id="sample" src="sample_2.jpg" alt="facedetection" /><span>©reactcodes blog</span></div><div class="p_image"><canvas id="imageInit"></canvas><canvas id="imageResult"></canvas></div>
</div>

const utils = new Utils('errorMessage');
const imageUsed = document.getElementById('sample').getAttribute('src')
const applyButton =document.getElementById('apply')applyButton.setAttribute('disabled','true')
applyButton.onclick = setUpApplyButtonutils.loadOpenCv(() => {    setTimeout(function () {         applyButton.removeAttribute('disabled');    
},500)});const setUpApplyButton = function () {      utils.loadImageToCanvas(imageUsed, 'imageInit')
}

现在我将把剩下的代码添加到setUpApplyButton函数中，到目前为止我所做的是

1. 在 img 标签中显示原始代码
2. 加载应用程序的 opencv 库 onload
3. 单击应用将相同的 img src 加载到具有 id ' imageInit的画布中'

访问 opencv/haarcascade_frontalface_default.xml at master · opencv/opencv · GitHub

以获取面部 xml 文件， 一旦下载到我们拥有的项目文件夹中 ，这将允许我们现在使用 opencv js 检测面部加载该文件
 

let faceCascadeFile = 'haarcascade_frontalface_default.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {console.log('cascade ready to load.');}); 
}

所以现在在您的浏览器控制台中，如果它显示“级联就绪”，那么一切正常，我们已经准备好级联

现在我们将简单地从imadeinit画布读取数据，我们之前在该画布上加载了图像，并将为 ReactVector 和 CascadeClassifier 创建实例
 

let src = cv.imread('imageInit');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
let faces = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
faceCascade.load(faceCascadeFile);  
// Imp ::: In this line we are loading the xml we downloaded for facedata
let msize = new cv.Size(0, 0);

现在让我们检测图像中可用的人脸
 

faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
console.dir(faceCascadeFile)

现在变量 faces 包含所有检测到的 faces 数组，所以我们运行一个循环并标记检测到的区域

console.log(faces)
for (let i = 0; i < faces.size(); ++i) {let roiGray = gray.roi(faces.get(i));let roiSrc = src.roi(faces.get(i));let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,faces.get(i).y + faces.get(i).height);cv.rectangle(src, point1, point2, [255, 0, 0, 255]);roiGray.delete(); roiSrc.delete();
}

现在让我们将最终结果加载到结果画布中，并清除使用的变量
 

cv.imshow('imageResult', src);
src.delete(); gray.delete(); faceCascade.delete();
document.getElementById('imageInit').style.display = "none"

感谢您的宝贵时间，希望对您 有所帮助，请在下方评论分享您的反馈。