吗咿呀嘿-用js来搞个简单的人脸识别

缘起
“蚂蚁呀嘿，蚂蚁呀呼，蚂蚁呀哈” 相信最近好多人的朋友圈或者抖音都被类似视频刷过屏！
类似的效果最早是在2020年初，那个时候大家应该还都记得，几乎所有的人都因为疫情原因被迫线上办公！
工作当然离不开开会了，这点歪果仁和中国很像，国内我们一般用qq或者钉钉来个在线视频会议！歪果仁也会经常开线上会议，不过他们用的最多的是zoom这个软件。经常的在线会会让人很烦躁，为什么呢？原本在家办公就不用洗头了，但是为了开在线视频会议还得去专门洗个头！
so，一个来自俄罗斯程序猿就想了一个招数恶搞一下他的同事。他基于 first-order-model 做了一个叫做Avatarify 的软件，并且放在了全世界做大的同性交友网站github上。First Order Motion Model for Image Animation 简单来说就是把一张图片变成动态的。Avatarify ，看起来很熟悉的名字，你肯定听过一部叫阿凡达的电影！之后程序猿小哥又基于Avatarify 做了一个苹果app，在网上掀起了吗咿呀嘿旋风，不过在上架appstore7天后在中国区就被下架了，原因不得而知。
来看一下 First Order Motion Model上的图片动画结果

First Order Motion Model上的swap face结果
看完以后大概能明白为什么被下架了！如果东西能被普通人随便使用，那么我们的表情甚至动作都能被别人模拟出来，只要他有一张你的照片！所以说人脸识别不是绝对安全，什么都可以被模拟！这两天的315晚会不知道大家看没有看，好多商家都在非法收集的脸部信息！
上面我们提到的库都是python的，app实现这样的功能都是把图片或者视频传输给服务器，然后服务器处理文件。
浏览器环境人脸识别
我们今天要在浏览器环境下面实现一个简单的人脸识别，我们会用到Tracking.js ，这是一个独立的JavaScript库，用于跟踪从相机或者图片实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。
trankingjs下载
我们需要先点击后面的标签下载trankingjs
trankingjs使用-识别图片
引入 tracking-min.js人脸识别库
引入face-min.js，eye-min.js，mouth-min.js 脸部，眼睛，嘴巴等模型文件
创建html文件，内容如下

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./build/tracking-min.js"></script><script src="./build/data/face-min.js"></script><script src="./build/data/mouth-min.js"></script><script src="./build/data/eye-min.js"></script><style>.rect {border: 2px solid #a64ceb;left: -1000px;position: absolute;top: -1000px;}
.demo-container {width: 100%;height: 530px;position: relative;background: #eee;overflow: hidden;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}
</style>
</head>

<body><div class="demo-container"><img src="./imgs/2.png" alt="" id="img"></div>
<script>window.onload = function () {var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);tracker.setStepSize(1.7);tracking.track('#img', tracker);tracker.on('track', function (event) {// 获取跟踪数据event.data.forEach(function (rect) {window.plot(rect.x, rect.y, rect.width, rect.height);});});
window.plot = function (x, y, w, h) {var rect = document.createElement('div');document.querySelector('.demo-container').appendChild(rect);rect.classList.add('rect');rect.style.width = w + 'px';rect.style.height = h + 'px';rect.style.left = (img.offsetLeft + x) + 'px';rect.style.top = (img.offsetTop + y) + 'px';};}
</script>

</body>

</html>

html和css比较简单，这里我们主要来看js代码。
注意js代码必须一定要写在window.onload 回调函数里面，否者获取不到图片的数据，就没有办法对图片进行识别！
创建识别对象

      // 创建追踪识别对象var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);// 设置 追踪识别的图片tracking.track('#img', tracker);// 监听追踪事件tracker.on('track', function (event) {// 获取追踪数据event.data.forEach(function (rect) {window.plot(rect.x, rect.y, rect.width, rect.height);});});

获取的event.data是一个数组，数组存放识别处理出来的脸部数据，数据结构如下
{width: 61, height: 61, x: 244, y: 125}
x和y是识别出来元素的坐标，width和height是识别出来元素的宽度
处理识别结果
接下来我们只要需要把得到的结果标记到图片的对应的位置即可，通过plot函数创建一个div，给定对应的坐标和宽高

   window.plot = function (x, y, w, h) {var img = document.querySelector('#img')var rect = document.createElement('div');document.querySelector('.demo-container').appendChild(rect);rect.classList.add('rect');rect.style.width = w + 'px';rect.style.height = h + 'px';rect.style.left = (img.offsetLeft + x) + 'px';rect.style.top = (img.offsetTop + y) + 'px';};

然后就会看到这样的结果，会识别出照片的眼睛、鼻子、嘴巴
trankingjs使用-识别摄像头数据
创建html文件，写入如下代码

<!doctype html>
<html>

<head><meta charset="utf-8"><title>demo</title>
<script src="./build/tracking-min.js"></script><script src="./build/data/face-min.js"></script><style>video,canvas {position: absolute;}
</style>
</head>

<body>
<div class="demo-container"><video id="video" width="320" height="240" preload autoplay loop muted></video><canvas id="canvas" width="320" height="240"></canvas></div>
<script>window.onload = function () {// 视频显示var video = document.getElementById('video');//   绘图var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');//   设置识别的放大比例tracker.setInitialScale(4);//   设置步长tracker.setStepSize(2);//   边缘密度tracker.setEdgesDensity(0.1);
//   启动摄像头，并且识别视频内容tracking.track('#video', tracker, {camera: true});
tracker.on('track', function (event) {context.clearRect(0, 0, canvas.width, canvas.height);// 绘制event.data.forEach(function (rect) {context.strokeStyle = '#a64ceb';context.strokeRect(rect.x, rect.y, rect.width, rect.height);});});

};
</script>

</body>

</html>

核心js代码解释如下
创建识别对象
创建识别对象并且启用摄像头，将摄像头内容输出到video标签上

// 视频显示var video = document.getElementById('video');//创建识别对象var tracker = new tracking.ObjectTracker('face');//   设置识别的放大比例tracker.setInitialScale(4);//   设置步长tracker.setStepSize(2);//   边缘密度tracker.setEdgesDensity(0.1);//   启动摄像头，并且识别视频内容tracking.track('#video', tracker, {camera: true});

注意：这里的识别放大比例，步长，边缘密度等值可以根据摄像头距离物体远近自己调整。
处理识别结果

      // 创建canvas 用于绘图绘图var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//监听识别事件tracker.on('track', function (event) {//清除上一次绘图结果context.clearRect(0, 0, canvas.width, canvas.height);// 根据识别结果绘制绘制矩形event.data.forEach(function (rect) {context.strokeStyle = '#a64ceb';context.strokeRect(rect.x, rect.y, rect.width, rect.height);});});

然后启动起来，浏览器会提示是否允许开启摄像头！点击允许，就会看到你英俊潇洒（沉鱼落雁）的脸庞！

吗咿呀嘿-用js来搞个简单的人脸识别相关推荐

vue 使用人脸识别_使用Vue.js和Kairos构建简单的人脸识别应用
vue 使用人脸识别 Face Detection and Recognition have become an increasingly popular topic these days. It's ...
基于faceapi.js框架，在前端完成人脸识别
https://www.toutiao.com/a6717089581591691779/ 本文为大家介绍的是一款在浏览器端运行的人脸识别框架,即faceapi.js .它基于tensorflow.j ...
python简单代码演示效果-10分钟教你用python 30行代码搞定简单手写识别！
欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 手写笔记还是电子笔记好呢? 毕业季刚结束,眼瞅着2018级小萌新马上就要来了,老腊肉小编为了咱学弟学妹们的学习,绞尽脑汁准备编一套大学秘籍, ...
tree.js 酷炫的效果，人脸识别签到思路，html5 3D微信头像自动抽奖代码
1.酷炫效果 1.1 网址: https://wow.techbrood.com/fiddle/43962 网址:https://wow.techbrood.com/fiddle/25678 1.2 ...
一文搞懂人脸识别那点事---人脸识别方案summary
The Summary Of Face Recognition [全文共计7162字,预计阅读15分钟,消耗脑容量20MB] 人脸识别包含人脸检测.人脸对齐.人脸识别三个步骤. 首先利用人脸检测(Fa ...
vue基于face-api.js实现人脸识别
一.face-api.js Face-api.js 是一个 JavaScript API,是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现.它实现了一系列的卷积神经网 ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
使用js插件实现简单有趣的人脸识别
前阶段无聊想搞个人脸识别玩玩,发现一个有趣的插件包,虽然不算特别强大但是相对还是能实现效果,主要是它简单啊,让你5分钟内就会用,可以去玩玩看,现在我把它拿出来和大家分享这个插件就是jquery.fa ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...

吗咿呀嘿-用js来搞个简单的人脸识别

吗咿呀嘿-用js来搞个简单的人脸识别相关推荐

最新文章

热门文章