前言
是不是覺(jué)得不可思議，js已經(jīng)強(qiáng)大到這個(gè)地步？ 是的，js日新月異，它在不斷的進(jìn)步。只要稍不留神，那我們都只能望塵莫及了。
今天我們就來(lái)看看是什么js插件可以如此厲害？
人臉識(shí)別JAVAScript也可以輕松搞定
tracking.js
tracking.js 庫(kù)將不同的計(jì)算機(jī)視覺(jué)算法和技術(shù)引入瀏覽器環(huán)境。通過(guò)使用現(xiàn)代html5規(guī)范，能夠進(jìn)行實(shí)時(shí)顏色跟蹤、人臉檢測(cè)等等。而這些牛逼的功能，僅僅只有7kb大小。
人臉識(shí)別示例
<script src="./tracking-min.js"></script>
<script src="./face-min.js"></script>
...
<img id="img" src="assets/faces.jpg">
...
<script>
window.onload = function() {
var img = document.getElementById('img');
var tracker = new tracking.ObjectTracker('face');
tracking.track(img, tracker);
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.width, rect.height);
plotRectangle(rect.x, rect.y, rect.width, rect.height);
});
});
// 下方的代碼可以先忽略
var friends = [ 'Thomas Middleditch', 'Martin Starr', 'Zach Woods' ];
var plotRectangle = function(x, y, w, h) {
var rect = document.createElement('div');
var arrow = document.createElement('div');
var input = document.createElement('input');
input.value = friends.pop();
rect.onclick = function name() {
input.select();
};
arrow.classList.add('arrow');
rect.classList.add('rect');
rect.AppendChild(input);
rect.appendChild(arrow);
document.getElementById('photo').appendChild(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>
代碼解析：
1、首先引入tracking.js，以及相關(guān)的實(shí)例js
2、new 一個(gè)實(shí)例，獲取face集合，event.data
3、遍歷集合，獲取每個(gè)face坐標(biāo)等信息
4、繪制出坐標(biāo)所在選區(qū)（這部分可以忽略，主要就上面3步）
人臉識(shí)別JavaScript也可以輕松搞定
坐標(biāo)集合描述
人臉識(shí)別JavaScript也可以輕松搞定
臉嘴巴，眼睛識(shí)別
代碼大同小異，不過(guò)需要在引入兩個(gè)js文件
... <script src="./eye-min.js"></script> <script src="./mouth-min.js"></script> ... <script> var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']); </script>
人臉識(shí)別JavaScript也可以輕松搞定
通過(guò)上圖，就會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，不是很清晰的部位，是不能被識(shí)別出來(lái)的，最左邊的人像，只識(shí)別出了一只眼睛。
這里還有一個(gè)js插件也可以做人臉識(shí)別，咱們就來(lái)對(duì)比一下。
PK
先來(lái)介紹一下另外一款人臉識(shí)別插件，JqueryFaceDetection，顧名思義，是一款基于Jquery的插件。
代碼上面我們就不做對(duì)比了，主要來(lái)看看識(shí)別度，識(shí)別情況。
人臉識(shí)別JavaScript也可以輕松搞定
此圖一出，有愛(ài)好JqueryFaceDetection的小伙伴要說(shuō)，what? 說(shuō)好的人臉識(shí)別，你給我放個(gè)大猩猩是幾個(gè)意思？好吧，我錯(cuò)了，來(lái)看下圖。
tracking.js
人臉識(shí)別JavaScript也可以輕松搞定
JqueryFaceDetection
人臉識(shí)別JavaScript也可以輕松搞定
這下就好說(shuō)明問(wèn)題了，tracking.js略勝一籌。
顏色識(shí)別
顏色識(shí)別只需要引入tracking-min.js即可。這里在圖中查找，品紅，青色和黃色，然后用框標(biāo)記出來(lái)。
window.onload = function() {
var img = document.getElementById('img');
var demoContainer = document.querySelector('.demo-container');
var tracker = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
window.plot(rect.x, rect.y, rect.width, rect.height, rect.color);
});
});
tracking.track('#img', tracker);
window.plot = function(x, y, w, h, color) {
var rect = document.createElement('div');
document.querySelector('.demo-container').appendChild(rect);
rect.classList.add('rect');
rect.style.border = '2px solid ' + color;
rect.style.width = w + 'px';
rect.style.height = h + 'px';
rect.style.left = (img.offsetLeft + x) + 'px';
rect.style.top = (img.offsetTop + y) + 'px';
};
};
人臉識(shí)別JavaScript也可以輕松搞定
其他
tracking.js不僅能識(shí)別圖片，還能處理視頻。
人臉識(shí)別JavaScript也可以輕松搞定
人臉識(shí)別JavaScript也可以輕松搞定
總的來(lái)看，是不是感覺(jué)很強(qiáng)大了？未來(lái)可期，前端技術(shù)越來(lái)越厲害，希望和你攜手共進(jìn)。
公告
喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！
