我一直對人工智慧辨識技術非常感興趣,因為我無法想像這究竟是一種什麼樣的演算法,什麼樣的分析過程。無論是聲音辨識、人臉辨識或其它種識別,人們的外表、說話的方式都是如此不同,一種圖片你可以用不同的方式、從不同的角度拍攝,我不能理解這些辨識技術是如何做到的。因為之前已經介紹了JavaScript裸體辨識技術,還有個叫做「面具」的遊戲也使用了這種辨識技術,我想對於臉部辨識技術也應該研究一下。 Facebook使用了這種技術,在手勢控制中也能用到它,所以,你網站上也會有應用的地方。
我找到的一個可以用於人臉辨識的JavaScript程式包是Face Detection,它是由Jay Salvat和Liu Liu開發的。它是一個標準的jQuery插件,透過對提供的圖片進行分析,傳回所有找到的臉部影像的座標。下面我們就來看看它是如何使用的!
使用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("<p>", { 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影片教學
以上是聊聊JavaScript人臉辨識技術的詳細內容。更多資訊請關注PHP中文網其他相關文章!