使用 Javascript 和 OpenCV.js 进行人脸检测

布满荆棘的人生 2023-10-01 15:54 36阅读 0赞

大家好，我们将研究如何使用常规 Javascript、HTML Canvas 和 OpenCV.js 库从图像中检测人脸。
让我们先看一些例子，然后我们将继续编写代码并解释
watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16
如果您需要查看完整的代码库刚刚获得我的 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.fluidicon.pnghttps://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 画布

  1. <div class="container">
  2.     <div id="background" class="o_image">
  3.             <img id="sample" src="sample_2.jpg" alt="facedetection" />
  4.             <span>©reactcodes blog</span>
  5.     </div>
  6.     <div class="p_image">
  7.             <canvas id="imageInit"></canvas>
  8.             <canvas id="imageResult"></canvas>
  9.     </div>
  10. </div>

现在我添加了一个应用按钮，单击应用按钮我正在使用将我的 img src 加载到画布中 

  1. const utils = new Utils('errorMessage');
  2. const imageUsed = document.getElementById('sample').getAttribute('src')
  3. const applyButton =document.getElementById('apply')applyButton.setAttribute('disabled','true')
  4. applyButton.onclick = setUpApplyButtonutils.loadOpenCv(() => {    
  5.    setTimeout(function () {         
  6.       applyButton.removeAttribute('disabled');    
  7. },500)});
  8.    const setUpApplyButton = function () {      
  9.    utils.loadImageToCanvas(imageUsed, 'imageInit')
  10. }

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

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

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

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

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

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

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

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

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

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

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

  1. console.log(faces)
  2. for (let i = 0; i < faces.size(); ++i) {
  3.     let roiGray = gray.roi(faces.get(i));
  4.     let roiSrc = src.roi(faces.get(i));
  5.     let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
  6.     let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
  7.                                         faces.get(i).y + faces.get(i).height);
  8.     cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
  9.     roiGray.delete(); roiSrc.delete();
  10. }

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读