基于浏览器的人脸识别标记

最近,Chrome在Chrome中集成了一套与图形识别相关的 API——Shape Detector API,只需要少量代码就能够实现人脸识别、二维码/条形码识别和文本识别。虽然这些 API 还处于实验阶段,只要条件允许,还是可以一下的。在 Windows 10 Chrome Canary 和 安卓 Chrome 等应用中,开启 chrome://flags/#enable-experimental-web-platform-features 功能,在控制台下输入

window.FaceDetector

window.BarcodeDetector

window.TextDetector

若得到“[native code]”,那么就可以使用这些 API 了。亲测 Windows7  Chrome 61 开启了 enable-experimental-web-platform-features 之后,虽然 window 包含以上三个 API,但调用 new FaceDetector.detector 时会报错:Face detection service unavailable.

这是一个面部标记的 demo代码。Ps:js 含有 ES6,没有转为 ES5,只能在支持 ES6 的浏览器上体验。

本来只是想简单的体验一下这个 API,没想到一不小心就写了这么多。。。

在这个 demo 中,一共有三个类:

  (1)FaceTag:所有的逻辑操作(人脸识别、搜索面部、面部标记)都在该类中实现。

  (2)ShowImg:实现图片按原比例绘制、缩放图片、获取 base64、清除功能。

  (3)SignTool:实现绘制方框、绘制文字、清除功能。

实际上,ShowImg 完全可以用 <img> 代替的,我只是为了能够缩小图片,缩短人脸检测的时间。由于图片一旦确定后,在检测和标记阶段是不变的,为了方便操作,ShowImg 和 SignTool 各包含一个 canvas。为了减少代码的重复,将创建 canvas 和获取 ctx 的任务交给了 FaceTag 。

面部检测

FaceDetector 真的很简单。

创建实例的时候,可以给它传递 FaceDetectorOptions,这个对象只含两个有效参数:   maxDetectedFaces:检测人脸的最大数目。  fastMode:是否优先考虑速度。

而它只提供了 detect(img) 一个方法,传入待检测的图像,结果以 Promise 的形式返回,是包含一组 DetectedFace 元素的数组,若检测不到则返回一个空数组。DetectedFace 的相关信息:x,y,left,top,right,bottom 等都包含在 boundingBox 中。

至于检测结果的话,正脸的精确度挺高的,但是侧脸基本检测不到。
class FaceTag {

  constructor(opt={}){    ...    this.detector = new FaceDetector(orignOpt.detectorOpt);    ...  }  ...  faceDetector(aspect = 1) {
    return new Promise((resolve, reject) => {
      let img = this.img.getImage();
      this.detector.detect(img)
        .then(faces => {
          if(faces.length === 0) {
            reject(‘检测不到面部哦‘);
          }else {
            this.faces = faces;
            resolve(this.faces);
          }
        })
        .catch(err => {
          reject(err);
        })
    })
  }  ...}

根据检测到的结果信息在 signTool 的 canvas 中绘制出来。

class SignTool {
  ...
  /*
   * 标识面部
   * param {Array} faces 需要标识的部分
   */
  drawFaces(faces=[], aspect = 1) {
    faces.length > 0 && faces.forEach(face => {
      this.drawRect(face.boundingBox, aspect);
    })
  }

  /*
   * 绘制 rect
   * param {object} rect 需要绘制的 rect
   */
  drawRect(rect={}, aspect = 1) {
    this.ctx.save()
    this.ctx.beginPath();
    this.ctx.lineWidth = rect.lineWidth || 2;
    this.ctx.strokeStyle = rect.color || ‘red‘;
    this.ctx.rect(Math.floor(rect.x * aspect),
      Math.floor(rect.y * aspect),
      Math.floor(rect.width * aspect),
      Math.floor(rect.height * aspect)
    );
    this.ctx.stroke();
    this.ctx.restore();
  }
  ...
}

选择面部

本 demo 中为 signTool  的 canvas添加点击事件,通过鼠标坐标与检测到的所有面部信息进行比较,判断是否选中面部。选中之后,重新绘制一遍所有的面部,在将选中面部高亮。

class FaceTag {
  ...
  /*
   * signTool 的 canvas 添加点击事件
   */
  addEvent() {
    if(!this.signTool.canvas) {
      return;
    }

    let canvas = this.signTool.canvas;
    let canvasBox = canvas.getBoundingClientRect();

    canvas.addEventListener(‘click‘, e => {
    // 计算鼠标在canvas中的位置
    let eX = e.clientX - canvasBox.left;
    let eY = e.clientY - canvasBox.top;

    this.findFace(this.img.getImage(), eX, eY)
      .then(face => {
        this.signTool.drawFaces(this.faces);
        this.heightLighRect(face);
        // 保存选中的面部
        this.beTagFace = face;
      })
    })
  }    ...
}

最后,beTagFace 的信息,将文字标注在方框附近 ,对面部的标记就完成啦。

时间: 2024-10-28 15:43:07

基于浏览器的人脸识别标记的相关文章

基于node.js人脸识别之人脸对比

基于node.js人脸识别之人脸对比 Node.js简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型. Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言. 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装. Node对一些特殊用

基于 OpenCV 的人脸识别

基于 OpenCV 的人脸识别 一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenCV 已被广泛运用在各种项目上,从谷歌街景的图片拼接,到交互艺术展览的技术实现中,都有 OpenCV 的身影. OpenCV 起始于 1999 年 Intel 的一个内部研究项目.从那时起,它的开发就一直很活跃.进化到现在,它已支持如 OpenCL 和 OpenGL 的多种现代技术,也支持如 iOS

#基于SVM的人脸识别

#数据说明 LFW全称为Labeled Faces in the Wild, 是一个应用于人脸识别问题的数据库,更多内容查看官方网站:http://vis-www.cs.umass.edu/lfw LFW语料图片,每张图片都有人名Label标记.每个人可能有多张不同情况下情景下的图片.如George W Bush 有530张图片,而有一些人名对应的图片可能只有一张或者几张.我们将选取出现最多的人名作为人脸识别的类别,如本实验中选取出现频数超过70的人名为类别, 那么共计1288张图片.其中包括A

基于HTML5 的人脸识别活体认证

近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝.招行的取款.养老金领取等方面,但在杜绝假冒.认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术方面. 本文介绍了在HTML5 环境下可以采用clmtrackr.js 检测工具,结合人脸模型,实现人脸的跟踪检测.同时采用动作识别实现活体认证. 但本方案只能够在Firefox 或者Chrome中使用.并且只适合研究学习,实际场景中不太理想,需要进一步优化才能够应用. 如果有人有相关的技术,可以推

知物由学 | 基于DNN的人脸识别中的反欺骗机制

"知物由学"是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道."知物由学"希望通过一篇篇技术干货.趋势解读.人物思考和沉淀给你带来收获的同时,也希望打开你的眼界,成就不一样的你.当然,如果你有不错的认知或分享,也欢迎通过邮件([email protected])投稿. 以下是正文: 本文作者:ArturBa?maga,YND的AI专家. 想象一下,只需使用脸部即可解

一种基于python的人脸识别开源系统

今天在搜索人脸识别的文章时,无意中搜到一个比较开源代码,介绍说是这个系统人脸的识别率 是比较高的,可以达到:99.38%.这么高的识别率,着实把我吓了一跳.抱着实事求是的态度.个人 就做了一些验证和研究. 按照github和网上的例子,安装成功后,使用里面的测试用例进行测试.从网上下载了十个人多 图片,能够识别到人脸的概率的确很高,基本可以达到上面的参数. 在识别到具体人的例子中,我拿例子自带的图片+自己拍摄的图片进行对比.发现这个识别率的确挺 高的.当从网上down下来的照片进行测试时,发现系

python基于OpenCV的人脸识别系统

想获得所有的代码,请下载(来自我的CSDN): https://download.csdn.net/download/qq_40875849/11292912 主函数: from recognition import recognition from training import training from datasets import datasets from delFile import del_file def main(): facedict = {} cur_path = r'.

基于LS1046A的边缘计算之人脸识别方案

随着越来越多的智能设备出现,从数据的获取到数据的处理到深度学习,必须要在信息当中进行挖掘.信息爆炸,设备不堪重负,边缘计算应运而生.而未来数据的产生速度会逐步超过存储能力.在未来的5-10年,边缘计算比数据中心的统一计算更为重要. 边缘计算将改变物联网(IoT),就像云计算改变企业IT一样.我们创建安全.高度可编程和灵活的计算系统来增强人工智能(AI)和机器学习(ML),有助于开创本地AI的时代,而边缘节点不仅智能,且训练有素,知晓它们的环境和状况,使其能够脱机或采用有限的云连接. 提供硬件安全

实验报告: 人脸识别方法回顾与实验分析 【OpenCV测试方法源码】

趁着还未工作,先把过去做的东西整理下出来~   Github源码:https://github.com/Blz-Galaxy/OpenCV-Face-Recognition (涉及个人隐私,源码不包含测试样本,请谅解~) 对实验结果更感兴趣的朋友请直接看 第5章 [摘要]这是一篇关于人脸识别方法的实验报告.报告首先回顾了人脸识别研究的发展历程及基本分类:随后对人脸识别技术方法发展过程中一些经典的流行的方法进行了详细的阐述:最后作者通过设计实验对比了三种方法的识别效果并总结了人脸识别所面临的困难与