使用 Javascript 和 OpenCV.js 进行人脸检测
大家好，我们将研究如何使用常规 Javascript、HTML Canvas 和 OpenCV 库从图像中检测人脸。让我们先看一些例子，然后我们将继续编写代码并解释如果您需要查看完整的代码库刚刚获得我的 github 存储库GitHub - rajeshpachaikani/face-detection-opencv-js: Simple demonstration of utilising Op
大家好，我们将研究如何使用常规 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>现在我添加了一个应用按钮，单击应用按钮我正在使用将我的 img src 加载到画布中
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"
感谢您的宝贵时间，希望对您 有所帮助，请在下方评论分享您的反馈。
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
2
0- 0
已为社区贡献25条内容
所有评论(0)