what？你沒有看錯，強大的JAVAScript也可以實現(xiàn)人臉識別功能。小編精心整理了一個人臉識別的JavaScript庫（tracking.js），通過這篇文章，你可以了解到如何在網(wǎng)頁中實現(xiàn)一個人臉識別功能。
tracking.js
Tracking.js 是一個獨立的JavaScript庫，用于跟蹤從相機實時收到的數(shù)據(jù)。跟蹤的數(shù)據(jù)既可以是顏色，也可以是人，也就是說我們可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現(xiàn)與移動，來觸發(fā)JavaScript 事件。它是非常易于使用的API，具有數(shù)個方法和事件（足夠使用了）。
還有一個我覺得不錯的功能就是，截取攝像頭的圖像，對于一些網(wǎng)站用這個功能來設置用戶頭像也是個很炫的功能。
簡單實例
引入核心類:
<script src="js/tracking-min.js"></script>
引入顏色模型類:
<script src="tracker/color.js">
實例化類啟用電腦的攝像頭:
var videoCamera = new tracking.VideoCamera().render();
實例化跟蹤通過顏色洋紅和顯示X,Y和Z位置的檢測區(qū)域在控制臺:
videoCamera.track({
type: 'color',
color: 'magenta',
onFound: function(track) {
console.log(track.x, track.y, track.z);
},
onNotFound: function() {}
});
在vue中使用
// 引入trackingjs所需文件
import tracking from '@
/assets/js/tracking-min.js'
import '@/assets/js/face-min.js'
const tracker = new window.tracking.ObjectTracker('face');
注：tracking類import之后，使用時需要window.tracking
事件
onFound : 每次檢測到目標時就會觸發(fā)該事件
new tracking.VideoCamera().track({
onFound: function(track) {
// do something
}
});
onNotFound : 每次沒有檢測到目標時就會觸發(fā)該事件.
new tracking.VideoCamera().track({
onNotFound: function(track) {
// do something
}
});
rect.x, rect.y, rect.width, rect.height這四個參數(shù)表示左上角的坐標和框出來人臉的大小。
示例案例
圖片人臉識別
效果圖
實現(xiàn)思路
通過tracking.js獲取圖片中人臉的信息，然后根據(jù)這些信息繪制相對應的div框即可。
核心代碼
<style>
.rect {
border: 2px solid #a64ceb;
left: -1000px;
position: absolute;
top: -1000px;
/* background-color: #a64ceb; */
border:1px solid #a64ceb;
}
#img {
position: absolute;
top: 50%;
left: 50%;
margin: -173px 0 0 -300px;
}
</style>
<div class="demo-frame">
<div class="demo-container">
<img id="img" src="img/faces.jpg" />
</div>
</div>
。。。。。。。。。。。。。
作者：MonkeySoft
篇幅有限更多請見擴展鏈接：
http://www.mark-to-win.com/tutorial/50710.html
