文档章节

face-api.js 示例

Canaan_
 Canaan_
发布于 07/02 21:02
字数 1101
阅读 107
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

该示例是基于GitHub的一个开源项目:https://github.com/justadudewhohacks/face-api.js
其核心的库是用js写的,所以它可以在web项目或nodejs 中使用。支持的功能有:【人脸识别】,【表情识别】,【年龄识别】,【性别识别】

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的人脸测试</title>
    <script src="face-api.js"></script>
    <link rel="stylesheet" href="css/materialize.css">
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" src="assets/jquery-2.1.1.min.js"></script>
    <script src="assets/materialize.min.js"></script>
</head>
<body>

<div class="center-content page-container">
    <div style="position: relative" class="margin">
        <img id="inputImg" src="" style="max-width: 800px;"/>
        <canvas id="overlay"/>
    </div>
    <div class="row side-by-side">
        <!-- image_selection_control -->
        <div id="selectList"></div>
        <input id="queryImgUploadInput" type="file" class="waves-effect btn bold" onchange="loadImageFromUpload()"
               accept=".jpg, .jpeg, .png">
        <!-- image_selection_control -->
    </div>
</div>

</body>
</html>

JS:


    /**
     * 示例1:找出图片中的人脸,并标识出来
     * @date 2020/7/2 19:28
     */
  //  async function findFace() {
        // const options = new faceapi.SsdMobilenetv1Options({minConfidence: 0.5})
     //   const options = new faceapi.TinyFaceDetectorOptions({inputSize: 512, scoreThreshold: 0.5});
       // const inputImgEl = $('#inputImg').get(0);
       // const results = await faceapi.detectAllFaces(inputImgEl, options);
       // const canvas = $('#overlay').get(0);
       // faceapi.matchDimensions(canvas, inputImgEl);
        //faceapi.draw.drawDetections(canvas, faceapi.resizeResults(results, inputImgEl))
    //}


    /**
     * 识别逻辑
     * @date 2020/7/2 19:31
     */
    async function computingFaceDescriptors() {
        // const options = new faceapi.SsdMobilenetv1Options({minConfidence: 0.5})
        const options = new faceapi.TinyFaceDetectorOptions({inputSize: 512, scoreThreshold: 0.5});
        const inputImgEl = $('#inputImg').get(0);
        const canvas = $('#overlay').get(0);
        const results = await faceapi.detectAllFaces(inputImgEl, options)
            .withFaceLandmarks()        //
            .withFaceDescriptors();     //

        //从上传的图中识别出的结果,有可能多张脸,所以这里是数组
        if (!results.length) {
            return
        }

        //展示方式1:在控制台打印
        for (let item of results) {
            // console.info(item.descriptor.toString());
            const findResult = faceMatcher.findBestMatch(item.descriptor); //将128位的人脸特征点在库中匹配,找到该人员
            console.info(findResult); //打印结果, 这里有个值 【distance】 值越大则表示匹配度越低。0时表示完全匹配
        }

        //展示方式2:在图片中标出
        faceapi.matchDimensions(canvas, inputImgEl);
        // resize detection and landmarks in case displayed image is smaller than
        // original size
        const resizedResults = faceapi.resizeResults(results, inputImgEl);
        resizedResults.forEach(({detection, descriptor}) => {
            const label = faceMatcher.findBestMatch(descriptor).toString();
            const options = {label};
            const drawBox = new faceapi.draw.DrawBox(detection.box, options);
            drawBox.draw(canvas)
        })
    }

    /**
     * 当选择图片时后,触发
     * @date 2020/7/2 19:41
     */
    async function loadImageFromUpload() {
        const imgFile = $('#queryImgUploadInput').get(0).files[0];
        const img = await faceapi.bufferToImage(imgFile);
        $('#inputImg').get(0).src = img.src;
        await computingFaceDescriptors();   
    }

    function getCurrentFaceDetectionNet() {
        // return faceapi.nets.ssdMobilenetv1;
        return faceapi.nets.tinyFaceDetector;
    }

    //模型是否已经加载,调用图片识别时,必须要加载【神经网络】
    function isFaceDetectionModelLoaded() {
        return !!getCurrentFaceDetectionNet().params
    }

    //初始化配置
    async function init() {
        await getCurrentFaceDetectionNet().load('/');        //【神经网络】资源加载
        await faceapi.loadFaceLandmarkModel('/');        
        await faceapi.loadFaceRecognitionModel('/');       
    }

    let faceMatcher = null; 
    $(function () {
        //创建人脸识对象.初始化参数也可以远程获取,主要是128位的数组,为人脸的取样点。每个人可以有多个标识。
        faceMatcher = new faceapi.FaceMatcher([
            new faceapi.LabeledFaceDescriptors(
                '玛力',  //这里可以换成 ID
                [new Float32Array([
                    -0.14437814056873322, 0.05994296818971634, 0.052244748920202255, -0.03983375430107117, -0.08312435448169708, -0.030570058152079582, 0.005779988132417202, -0.14438539743423462, 0.2069520205259323, -0.08029105514287949, 0.09520559012889862, 0.044213686138391495, -0.26621317863464355, 0.059839922934770584, -0.10035237669944763, 0.11125779896974564, -0.15514293313026428, -0.14929962158203125, -0.05386366695165634, -0.06979626417160034, 0.06611492484807968, -0.006858320906758308, 0.038625940680503845, 0.1418890506029129, -0.15817201137542725, -0.26001065969467163, -0.06602609902620316, -0.13606074452400208, -0.007913262583315372, 0.02455928549170494, 0.01811916194856167, 0.013367822393774986, -0.18945550918579102, 0.02371860295534134, 0.0485934317111969, 0.06050964817404747, -0.01599033549427986, -0.11827335506677628, 0.2011183798313141, -0.010510246269404888, -0.2357526570558548, -0.06614662706851959, 0.06954392790794373, 0.21447493135929108, 0.23102346062660217, 0.01119177509099245, 0.061912573873996735, -0.08008454740047455, 0.11315785348415375, -0.3370083272457123, 0.08964933454990387, 0.1441946178674698, 0.01786692999303341, 0.02155301347374916, 0.18966169655323029, -0.23147520422935486, -0.008186351507902145, 0.09289896488189697, -0.09150397032499313, 0.0869695320725441, 0.013342258520424366, -0.014006521552801132, 0.027492202818393707, -0.08980309963226318, 0.2168831080198288, 0.13577739894390106, -0.12638278305530548, -0.06156594678759575, 0.2677993178367615, -0.2410183697938919, -0.014273184351623058, 0.13276773691177368, -0.10169462859630585, -0.2102421373128891, -0.21187052130699158, -0.024309949949383736, 0.5148089528083801, 0.27898743748664856, -0.12166453152894974, 0.038764484226703644, -0.10964204370975494, 0.03095845878124237, 0.09171298891305923, 0.12379036843776703, -0.0153648154810071, 0.016608860343694687, -0.050403036177158356, 0.0060966419987380505, 0.2651139497756958, 0.05488889291882515, -0.06378757208585739, 0.27914103865623474, -0.0005529606714844704, -0.06909142434597015, 0.01980183832347393, -0.0016320582944899797, -0.08131153881549835, -0.07557553797960281, -0.1451617181301117, -0.05866599082946777, -0.038279008120298386, 0.0009653567685745656, 0.028725773096084595, 0.13365034759044647, -0.20651207864284515, 0.029926180839538574, -0.048260368406772614, -0.04451073706150055, -0.04492274299263954, 0.035708747804164886, -0.09850707650184631, 0.023999175056815147, 0.14070843160152435, -0.2583593726158142, 0.19342637062072754, 0.11087697744369507, -0.008580381982028484, 0.12448753416538239, -0.022861026227474213, 0.04249247536063194, 0.04946265369653702, -0.10064069926738739, -0.09826081991195679, -0.0865166112780571, 0.027229083701968193, -0.0879007875919342, 0.07427744567394257, 0.00283077172935009
                ])]
            ),
            new faceapi.LabeledFaceDescriptors(
                '梅',
                [new Float32Array([
                    -0.07969290763139725, 0.12957927584648132, 0.03301652893424034, -0.12401401996612549, -0.21247349679470062, 0.09815019369125366, -0.08094179630279541, -0.12099051475524902, 0.12254353612661362, -0.1242385059595108, 0.2287488728761673, -0.03146447613835335, -0.25628185272216797, -0.012387597002089024, 0.011487176641821861, 0.2056356519460678, -0.24071137607097626, -0.1478712260723114, -0.08686192333698273, -0.08197660744190216, -0.007522545289248228, 0.0878179594874382, 0.08912767469882965, 0.018414046615362167, -0.12655290961265564, -0.42754584550857544, -0.09200264513492584, -0.039351556450128555, 0.021223383024334908, -0.0812307670712471, 0.023490536957979202, 0.09795580059289932, -0.2095349133014679, 0.08361043781042099, 0.04217307269573212, 0.0773904025554657, -0.08719755709171295, -0.15052995085716248, 0.09888731688261032, -0.04061513394117355, -0.22227177023887634, -0.015745434910058975, 0.12072709202766418, 0.19630858302116394, 0.24895402789115906, -0.003336575347930193, 0.04459404572844505, -0.05077492818236351, 0.06974175572395325, -0.34000304341316223, 0.11768561601638794, 0.1179569885134697, 0.0008032918558456004, 0.02375239133834839, 0.07712286710739136, -0.18667389452457428, -0.06288854777812958, 0.14426733553409576, -0.1453467309474945, 0.025819838047027588, 0.06847764551639557, -0.042888421565294266, -0.05535220354795456, -0.11364045739173889, 0.28520891070365906, 0.22251424193382263, -0.20523995161056519, -0.20825999975204468, 0.15465879440307617, -0.12776698172092438, -0.03906353935599327, 0.07072076201438904, -0.140472412109375, -0.2061777114868164, -0.24915318191051483, 0.04848980903625488, 0.4150839149951935, 0.07443248480558395, -0.11472918838262558, 0.024164974689483643, -0.04679608717560768, -0.01908663474023342, -0.042073141783475876, 0.1485510617494583, -0.045341216027736664, -0.06136776879429817, -0.11485465615987778, 0.0952862873673439, 0.24660228192806244, -0.08498841524124146, -0.038398705422878265, 0.3587203025817871, -0.06014466658234596, -0.013621466234326363, -0.0028876641299575567, 0.15798375010490417, -0.11550477147102356, -0.003441411070525646, -0.12067177146673203, -0.009496117010712624, 0.023210925981402397, -0.08241527527570724, -0.08711596578359604, 0.15094666182994843, -0.13101358711719513, 0.19621604681015015, -0.07585656642913818, 0.03345268592238426, 0.0053003630600869656, -0.11833952367305756, -0.07799487560987473, -0.016868311911821365, 0.14644500613212585, -0.3045594394207001, 0.1779438704252243, 0.12795186042785645, 0.056625593453645706, 0.20287220180034637, 0.08542124181985855, 0.08698366582393646, 0.0819220319390297, -0.09155134111642838, -0.21965821087360382, -0.05239955708384514, 0.050722699612379074, -0.08340750634670258, -0.06841268390417099, 0.07882135361433029
                ])]
            ),
            new faceapi.LabeledFaceDescriptors(
                '小智',
                [new Float32Array([
                    -0.0463644340634346, 0.09586223214864731, -0.023017073050141335, -0.028019988909363747, -0.08932245522737503, 0.02006203681230545, -0.016619939357042313, -0.06073472276329994, 0.1459570676088333, -0.08318009972572327, 0.2184816598892212, 0.00627669645473361, -0.2843874394893646, 0.014515025541186333, -0.1354665458202362, 0.10580681264400482, -0.22319230437278748, -0.1327279508113861, -0.07698434591293335, -0.11447586119174957, 0.08595841377973557, -0.0012620604829862714, -0.020308921113610268, 0.07730638235807419, -0.14711140096187592, -0.2330506294965744, -0.08356457203626633, -0.09208613634109497, 0.04064466804265976, -0.14892590045928955, 0.06671418994665146, 0.04248752444982529, -0.08197332918643951, 0.052357323467731476, 0.020234426483511925, 0.04690812900662422, 0.009449384175240993, -0.11501262336969376, 0.22450385987758636, 0.034105200320482254, -0.13314470648765564, 0.06231013685464859, 0.013379325158894062, 0.3413694500923157, 0.1563205122947693, 0.019630160182714462, 0.0061635724268853664, -0.08549550175666809, 0.09922017902135849, -0.21969211101531982, 0.0235169418156147, 0.2154010832309723, 0.11432233452796936, 0.022776512429118156, 0.0732221007347107, -0.19882234930992126, 0.02118932269513607, 0.11276251822710037, -0.12344929575920105, 0.047600314021110535, 0.03475603833794594, -0.053514692932367325, 0.038531847298145294, -0.07642017304897308, 0.11777215451002121, 0.04493129253387451, -0.12736009061336517, -0.0789463147521019, 0.18775524199008942, -0.15182167291641235, -0.09427196532487869, 0.015611193142831326, -0.1375870406627655, -0.21707722544670105, -0.24198603630065918, 0.038372769951820374, 0.44357359409332275, 0.23949924111366272, -0.15137238800525665, 0.05906045436859131, -0.043613824993371964, 0.031477585434913635, 0.08900100737810135, 0.03829812631011009, -0.18989671766757965, -0.02708958461880684, -0.15121501684188843, 0.06357433646917343, 0.18398447334766388, 0.020891066640615463, -0.1023741289973259, 0.16885846853256226, -0.0007805313798598945, -0.01733124442398548, 0.0688653364777565, -0.011278994381427765, -0.09407958388328552, 0.011328890919685364, -0.1581171452999115, -0.00277170492336154, 0.025106508284807205, -0.144167959690094, 0.004429739899933338, 0.09070782363414764, -0.16142980754375458, 0.058565638959407806, 0.02178649604320526, -0.07138589024543762, -0.07573847472667694, 0.08973181992769241, -0.22571273148059845, 0.06271801143884659, 0.22091048955917358, -0.2626705765724182, 0.20335343480110168, 0.21111813187599182, 0.11404087394475937, 0.14840063452720642, 0.18940892815589905, 0.04961816221475601, -0.014532158151268959, -0.08408358693122864, -0.11658646911382675, -0.11331816017627716, 0.0257900170981884, 0.008652688935399055, 0.12018638849258423, 0.011078299023211002
                ])]
            )
        ]);

        init();
    })


主要加载的资源有:
js库
http://localhost:3000/face-api.js
神经网络资源
http://localhost:3000/tiny_face_detector_model-weights_manifest.json
http://localhost:3000/tiny_face_detector_model-shard1
http://localhost:3000/face_landmark_68_model-weights_manifest.json
http://localhost:3000/face_landmark_68_model-shard1
http://localhost:3000/face_recognition_model-weights_manifest.json
http://localhost:3000/face_recognition_model-shard1
http://localhost:3000/face_recognition_model-shard2

效果1:

效果2:

Canaan_
粉丝 21
博文 449
码字总数 189554
作品 0
福州
私信 提问
加载中
请先登录后再评论。
【opencv】图形的绘制

1.矩形图像的绘制: 原函数:void cvRectangle(CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8,int shift=0) img就是需要绘制的图像 pt1 and pt......

其实我是兔子
2014/10/08
1.2K
1
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
tiny php template--TPT

关于TPT TPT是php实现的用于模板解析小工具,全部实现仅仅60行代码。 配置 DIRCOMPILED和DIRTEMPLATE,分别表示模版编译目录和模版文件目录: define('DIRCOMPILED','/compileddiy');define(......

红猪-侠
2013/03/03
1K
1
Android传感器API之:磁场Magnetic Field源码与示例

Android的磁场传感器,Magnetic Field。。读取磁场的变化,通过该传感器可开发出指南针、罗盘等磁场应用。该传感器读取的数据是空间坐标系三个方向的磁场值,其数据单位为uT,即微特斯拉。 ...

DSALK
2011/11/30
2.8K
2
用 LFS 做极简高效的流媒体服务

示例可在:github git@osc 找到,包含一个详细的图片服务器 图片服务演示(简单部署了 php 的服务): 浏览图片:http://lfs2-ikcourage.myalauda.cn/testimage/image.php?type=read&id=1 上...

Courage
2015/09/07
5.8K
29

没有更多内容

加载失败,请刷新页面

加载更多

如何用Postman做接口自动化测试

目录 前言 什么是自动化测试 自动化测试有哪些分类 为什么需要自动化测试 Postman自动化测试演示 1.新建集合 2.新建接口 3.填写自动化测试脚本 4.录入所有接口 5.执行自动化测试 前言 什么是...

osc_71qxolcv
43分钟前
9
0
下载Crypto,CyCrypto,PyCryptodome 报错问题

python下载Crypto,CyCrypto,PyCryptodome,如有site-packages中存在crypto、pycrypto,在pip之前,需要pip3 uninstall crypto、pip3 uninstall pycrypto,否则无法安装成功。这里顺带说一下...

osc_pl4ni83h
45分钟前
16
0
HashMap JDK1.8实现原理

HashMap概述 HashMap存储的是key-value的键值对,允许key为null,也允许value为null。HashMap内部为数组+链表的结构,会根据key的hashCode值来确定数组的索引(确认放在哪个桶里),如果遇到索...

osc_cx8uhydz
46分钟前
11
0
快速打造属于你的接口自动化测试框架

1 接口测试 接口测试是对系统或组件之间的接口进行测试,主要是校验数据的交换,传递和控制管理过程,以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说,属于更底层的测试,这样带来的好...

osc_4eht81t7
48分钟前
6
0
MVC的Action上下文:ActionExecutingContext

就上图来看,大家注意了吗,ActionExecutingContext对象一共有3处引用。下面我来一一解析: 调用base.OnActionExecuting(filterContext)这个后,才会执行后续的ActionFilter,如果你确定只有一...

osc_4otxquc2
48分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部