jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标。它跟踪人脸并输出人脸模型的坐标位置为一个数组。我们相信,面部识别技术能够给我们的 Web 应用带来各种可能性,创造出互动的,有趣的功能。

  注:人脸识别,是基于人的脸部特征信息进行身份识别的一种生物识别技术。用摄像机或摄像头采集含有人脸的图像或视频流,并自动在图像中检测和跟踪人脸,进而对检测到的人脸进行脸部的一系列相关技术,通常也叫做人像识别、面部识别。

效果演示     插件下载

如何使用:

引入 jQuery 库和插件代码:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/dist/jquery.facedetection.min.js"></script>

设置带有人脸的图片:

<img id="picture" src="img/face.jpg">

调用插件代码获得脸部坐标:

<script>
$('#picture').faceDetection({
complete: function (faces) {
console.log(faces);
}
});
</script>

返回的数据:

插件返回的脸部数据

  • x — 图片中人脸的X坐标
  • y — 图片中人脸的Y坐标
  • width — 人脸的宽度
  • height — 人脸的高度
  • positionX — 相对于文档的X坐标
  • positionY — 相对于文档的Y坐标
  • offsetX — 相对于父元素的X偏移
  • offsetY — 相对于父元素的Y偏移
  • scaleX — 实际显示和原始宽度比
  • scaleY — 实际显示和原始高度比
  • confidence — 准确度
您可能感兴趣的相关文章

本文链接:jQuery/Zepto 人脸识别插件,支持图片和视频

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

jQuery 人脸识别插件,支持图片和视频的更多相关文章

  1. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

  2. Java离线人脸识别SDK 支持arcface 2.0 最新版

    虹软人脸识别SDK之Java版,支持SDK 1.1+,以及当前最新版本2.0,滴滴,抓紧上车! JDK SDK Win release license status 前言 由于业务需求,最近跟人脸识别 ...

  3. 19_Android中图片处理原理篇,关于人脸识别站点,图片载入到内存,图片缩放,图片翻转倒置,网上撕衣服游戏案例编写

    1载入图片到内存 (1).数码相机照片特别是大于3m以上的,内存吃不消,会报OutOfMemoryError,若是想仅仅显示原图片的1/8,能够通过BitmapFactory.Options来实现.详 ...

  4. 19_Android中图片处理原理篇,关于人脸识别网站,图片加载到内存,图片缩放,图片翻转倒置,网上撕衣服游戏案例编写

    1加载图片到内存 (1).数码相机照片特别是大于3m以上的,内存吃不消,会报OutOfMemoryError,若是想只显示原图片的1/8,可以通过BitmapFactory.Options来实现,具体 ...

  5. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 让jQuery的ajaxFileUpload插件支持onchange事件

    ajaxFileUpload插件只能上传一次的BUG发现还不少人遇到,很不幸我也遇到的,使用后发现里面的坑还不少,在createUploadForm方法中有句 var newElement = jQu ...

  7. 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能

    在线演示 本地下载

  8. 【C#】人脸识别 视频数据转图片数据

    使用虹软人脸识别的开发过程中遇到了转换的问题 因为不会用C#直接打开摄像头,就只能用第三方dll.一开始用Aforge,后来发现有个问题,关闭摄像头老是陷入等待,所以抛弃了.前一阵子开始用封装了Ope ...

  9. Android静态图片人脸识别的完整demo(附完整源码)

    Demo功能:利用android自带的人脸识别进行识别,标记出眼睛和人脸位置.点击按键后进行人脸识别,完毕后显示到imageview上. 第一部分:布局文件activity_main.xml < ...

随机推荐

  1. Windows Server 2012 虚拟化实战:网络(一)

    虚拟化对于计算的抽象,大家可能相对熟悉,也许都有在单机使用诸如Virtual PC或者Virtual Box的经验.使用的这些虚拟化软件的第一印象就是我们的CPU可以同时运行多套不同的操作系统,并且其 ...

  2. ASP.NET中将导出的数据以UTF-8编码方式进行存储

      Response.Charset = "UTF-8"; Response.ContentEncoding = Encoding.UTF8; Response.AppendHea ...

  3. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  4. CodeBlocks及LCM应用

    以下是在开发过程中遇到的一些细节点: 1)called after throwing an instance of std::bad_alloc 此问题是由于publish(data),当中data赋 ...

  5. 开发 ASP.NET vNext 续篇:云优化的概念、Entity Framework 7.0、简单吞吐量压力测试

    继续上一篇<开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1)>之后, 关于云优化和版本控制: 我本想做一下MAC和LINUX的self-ho ...

  6. vim编辑强制退出

    quit!命令可以进行强制退出 在修改文件时注意他的权限, ls -l:查看当前目录下的所有文件的详细信息

  7. 使用plsql创建表空间和用户

    使用plsql创建oracle数据库的表空间和用户,并授权的语句.1.创建表空间:说明:datafile是指定创建位置,指向oracle数据库的默认位置:autoextend 设置容量为自动增长,50 ...

  8. ka/ks

    1. If dN/dS = 1, amino-acid substitutions may be largely neutral. However, there is also the possibi ...

  9. matlab中数组创建方法

    创建数组可以使用 分号 :  逗号, 空格 数组同行用 逗号,或空格分割 不同行元素用 分号: clc; a = [ ]; b1 = a();%第3个元素 b2 = a(:)%第2//4个元素 b3 ...

  10. bzoj 1391

    建图跑最小割,加当前弧优化. #include<iostream> #include<cstdio> #include<cstring> #include<q ...