首頁 > web前端 > js教程 > 主體

JavaScript人臉辨識技術及臉部辨識JavaScript類別庫Tracking.js_javascript技巧

WBOY
發布: 2016-05-16 15:39:25
原創
2754 人瀏覽過

我一直對人工智慧辨識技術非常感興趣,因為我無法想像這究竟是一種什麼樣的演算法,什麼樣的分析過程。無論是聲音辨識、人臉辨識或其它種識別,人們的外表、說話的方式都是如此不同,一種圖片你可以用不同的方式、從不同的角度拍攝,我不能理解這些辨識技術是如何做到的。有個叫做「面具」的遊戲也使用了這種辨識技術,我想對於臉部辨識技術也應該研究一下。 Facebook使用了這種技術,在手勢控制中也能用到它,所以,你網站上也會有應用的地方。

我找到的一個可以用於人臉辨識的JavaScript程式包是Face Detection,它是由Jay Salvat和Liu Liu開發的。它是一個標準的jQuery插件,透過對提供的圖片進行分析,傳回所有找到的臉部影像的座標。下面我們就來看看它是如何使用的!

jQuery.faceDetection

使用Face Detection這個jQuery plugin,你需要引入四個js檔案:

<script src="jquery-1.4.3.min.js"></script>
<!-- mas js -->
<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>
登入後複製

這個臉部辨識插件的頭兩個檔案裡是它的各種功能性程序,透過它們能得到一個陣列對象,這些對象裡儲存的就是圖片裡的臉部座標資訊。下面是一個例子:

var coords = jQuery("#myImage").faceDetection();
/* 返回:
 {
 x: 525
 y: 435,
 width: 144,
 height: 144,
 positionX: 532.6353328125226,
 positionY: 443.240976080536,
 offsetX: 532.6353328125226,
 offsetY: 443.240976080536,
 confidence: 12.93120119,
 neighbour: undefined,
 }
*/
登入後複製

你也可以在偵測方法上加入事件回呼函數:

var coords = jQuery("#myImage").faceDetection({
 complete: function(image, coords) {
 // Do something
 },
 error: function() {
 console.warn("无法分析图片");
 }
});
登入後複製

對於辨識出的臉部訊息,你可以做任何的處理東西。你可以在圖片中臉部的位置畫出框線:

jQuery("img").each(function() {
 var img = this;
 // 获取脸部坐标
 var coordinates = jQuery(img).faceDetection();
 // 在脸上画出框线
 if(coordinates.length) {
 coordinates.forEach(function(coord) {
 jQuery("<div&gt", {
 css: {
 position: "absolute",
 left: coord.positionX + 5 + "px",
 top: coord.positionY + 5 + "px",
 width: coord.width + "px",
 height: coord.height + "px",
 border: "3px solid white"
 }
 }).appendTo(img.parentNode);
 });
 }
});
登入後複製

這很簡單,當然你可以做複雜的處理,比如說提取出來。

我用了各種圖片進行臉部辨識嘗試,正如我預想到的,結果並不是很完美。但不管怎樣,還是相當不錯的。這是一個很簡單的腳本技術,而且沒有任何技術是十全十美的。這個臉部辨識插件並不具有臉部比較功能,你需要用其它方法並提供臉部特徵資訊來實現此功能。總之,相當不錯,強烈建議你試試看。

臉部辨識JavaScript類別庫Tracking.js

對Web開發者而言,開源的JavaScript庫Tracking.js正在使電腦視覺和擴增實境技術變得簡單, 使用它可以展示效果類似Kinect或Wii的體感應用,且該JavaScript庫體積小(~ 7k),非常輕量級,且介面簡潔。

Tracking.js 能夠在行動網路應用程式、桌面應用程式中運作,甚至可以和基於Node.js的伺服器進行配對。 它會為瀏覽器帶來電腦圖形學演算法和技術,其擁有功能:臉部辨識(某個特定的顏色時或人物/臉龐/身體出現移動的時候)、即時色彩追蹤。對於Web開發而言,以前需要透過C或C 的技術才能達到類似效果。而現在Traking.js提供了一個網頁元件,因此Web前端開發人員可以存取HTML標籤元件來實現類似功能,而無需了解JavaScript,這極大的簡化了網路開發。

Tracking.js包含一個色彩追蹤演算法和物件追蹤元件,它能使網頁瀏覽器辨識臉部及眼睛的變化。例如,Web前端還可以對於用這個功能來設定用戶頭像,對一些網站而言,這也是個很炫的功能;同時對跟踪的臉部數據和後台數據庫進行匹配,從而和反饋給用戶更多有用的數據。

目前,在GitHub上Tracking.js源碼工程已經被Fork了200次以上,8月份上旬,該JS庫已經升級為1.0版本。

以上內容就是跟大家分享的JavaScript人臉辨識技術及臉部辨識JavaScript類別庫Tracking.js,希望大家喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板