JavaScript人臉識(shí)別技術(shù)及臉部識(shí)別JavaScript類(lèi)庫(kù)Tracking.js
我一直對(duì)人工智能識(shí)別技術(shù)非常感興趣,因?yàn)槲覠o(wú)法想象這究竟是一種什么樣的算法,什么樣的分析過(guò)程。無(wú)論是聲音識(shí)別、人臉識(shí)別或其它種識(shí)別,人們的外貌、說(shuō)話的方式都是如此不同,一種圖片你可以用不同的方式、從不同的角度拍攝,我不能理解這些識(shí)別技術(shù)是如何做到的。有個(gè)叫做“面具”的游戲也使用了這種識(shí)別技術(shù),我想對(duì)于臉部識(shí)別技術(shù)也應(yīng)該研究一下。Facebook使用了這種技術(shù),在手勢(shì)控制中也能用到它,所以,你網(wǎng)站上也會(huì)有應(yīng)用的地方。
我找到的一個(gè)可以用于人臉識(shí)別的JavaScript程序包是Face Detection,它是由Jay Salvat和Liu Liu開(kāi)發(fā)的。它是一個(gè)標(biāo)準(zhǔn)的jQuery插件,通過(guò)對(duì)提供的圖片進(jìn)行分析,返回所有找到的臉部圖像的坐標(biāo)。下面我們來(lái)看看它是如何使用的!
jQuery.faceDetection
使用Face Detection這個(gè)jQuery plugin,你需要引入四個(gè)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>
這個(gè)臉部識(shí)別插件的頭兩個(gè)文件里是它的各種功能性程序,通過(guò)它們能得到一個(gè)數(shù)組對(duì)象,這些對(duì)象里存儲(chǔ)的就是圖片里的臉部坐標(biāo)信息。下面是一個(gè)例子:
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, } */
你還可以在檢測(cè)方法上加入事件回調(diào)函數(shù):
var coords = jQuery("#myImage").faceDetection({ complete: function(image, coords) { // Do something }, error: function() { console.warn("無(wú)法分析圖片"); } });
對(duì)于識(shí)別出的臉部信息,你可以做任何的處理東西。你可以在圖片中臉部的位置畫(huà)出框線:
jQuery("img").each(function() { var img = this; // 獲取臉部坐標(biāo) var coordinates = jQuery(img).faceDetection(); // 在臉上畫(huà)出框線 if(coordinates.length) { coordinates.forEach(function(coord) { jQuery("<div>", { 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); }); } });
這很簡(jiǎn)單,當(dāng)然你可以做復(fù)雜的處理,比如說(shuō)提取出來(lái)。
我用了各種圖片進(jìn)行臉部識(shí)別嘗試,正如我預(yù)想到的,結(jié)果并不是很完美。但不管怎樣,還是相當(dāng)不錯(cuò)的。這是一個(gè)很簡(jiǎn)單的腳本技術(shù),而且沒(méi)有任何技術(shù)是十全十美的。這個(gè)臉部識(shí)別插件并不具有臉部比較功能,你需要用其它方法并提供面部特征信息實(shí)現(xiàn)此功能??傊?,相當(dāng)不錯(cuò),強(qiáng)烈建議你試一下。
臉部識(shí)別JavaScript類(lèi)庫(kù)Tracking.js
對(duì)Web開(kāi)發(fā)者而言,開(kāi)源的JavaScript庫(kù)Tracking.js正在使計(jì)算機(jī)視覺(jué)和增強(qiáng)現(xiàn)實(shí)技術(shù)變得簡(jiǎn)單, 使用它可以展示效果類(lèi)似Kinect或者Wii的體感應(yīng)用,且該JavaScript庫(kù)體積小 (~7k),非常輕量級(jí),且接口簡(jiǎn)潔。
Tracking.js 能夠在移動(dòng)Web應(yīng)用、桌面應(yīng)用中工作,甚至可以和基于Node.js的服務(wù)器進(jìn)行配對(duì)。 它會(huì)給瀏覽器帶來(lái)計(jì)算機(jī)圖形學(xué)算法和技術(shù),其擁有功能:臉部識(shí)別(某個(gè)特定的顏色時(shí)或人物/臉龐/身體出現(xiàn)移動(dòng)的時(shí)候)、實(shí)時(shí)色彩跟蹤。對(duì)于Web開(kāi)發(fā)而言,以前需要通過(guò)C或C++的技術(shù)才能實(shí)現(xiàn)類(lèi)似效果。而現(xiàn)在Traking.js提供了一個(gè)Web組件,因此Web前端開(kāi)發(fā)人員可以訪問(wèn)HTML標(biāo)簽組件來(lái)實(shí)現(xiàn)類(lèi)似功能,而無(wú)需了解JavaScript,這極大的簡(jiǎn)化了Web開(kāi)發(fā)。
Tracking.js包括一個(gè)色彩跟蹤算法和對(duì)象跟蹤組件,它能使Web瀏覽器識(shí)別臉部及眼睛的變化。例如,Web前端還可以對(duì)于用這個(gè)功能來(lái)設(shè)置用戶頭像,對(duì)一些網(wǎng)站而言,這也是個(gè)很炫的功能;同時(shí)對(duì)跟蹤的臉部數(shù)據(jù)和后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行匹配,從而和反饋給用戶更多有用的數(shù)據(jù)。
目前,在GitHub上Tracking.js源碼工程已經(jīng)被Fork了200次以上,8月份上旬,該JS庫(kù)已經(jīng)升級(jí)為1.0版本。
以上內(nèi)容就是給大家分享的JavaScript人臉識(shí)別技術(shù)及臉部識(shí)別JavaScript類(lèi)庫(kù)Tracking.js,希望大家喜歡。
相關(guān)文章
js使用循環(huán)清空某個(gè)div中的input標(biāo)簽值
清空div中input標(biāo)簽值的方法有很多,下面為大家介紹下使用循環(huán)清空某個(gè)div中的input標(biāo)簽值的具體實(shí)現(xiàn)2014-09-09javascript簡(jiǎn)單實(shí)現(xiàn)命名空間效果
這篇文章主要介紹了javascript簡(jiǎn)單的實(shí)現(xiàn)命名空間效果的方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實(shí)例分析
這篇文章主要介紹了js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法,結(jié)合具體實(shí)例形式分析了javascript構(gòu)造函數(shù)constructor概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05typescript環(huán)境安裝并開(kāi)啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
這篇文章主要介紹了安裝typescript環(huán)境并開(kāi)啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件,本文教大家最基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件,需要的朋友可以參考下2022-06-06JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果
這篇文章主要介紹了JS寫(xiě)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果,文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下2023-01-01layui異步加載table表中某一列數(shù)據(jù)的例子
今天小編就為大家分享一篇layui異步加載table表中某一列數(shù)據(jù)的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09window.print打印指定div指定網(wǎng)頁(yè)指定區(qū)域的方法
這篇文章主要介紹了window.print打印指定div指定網(wǎng)頁(yè)指定區(qū)域的方法,需要的朋友可以參考下2014-08-08簡(jiǎn)單談?wù)刯avascript代碼復(fù)用模式
這篇文章主要簡(jiǎn)單談?wù)刯avascript代碼復(fù)用模式,主要詳細(xì)介紹了類(lèi)式繼承模式中的默認(rèn)模式,希望大家能夠喜歡。2015-01-01Javascript模塊化機(jī)制實(shí)現(xiàn)原理詳解
這篇文章主要介紹了Javascript模塊化機(jī)制實(shí)現(xiàn)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04