生活随笔
收集整理的這篇文章主要介紹了
吗咿呀嘿-用js来搞个简单的人脸识别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
緣起 瀏覽器環境人臉識別 trankingjs下載 trankingjs使用-識別圖片
< ! DOCTYPE html
>
< html lang
= "en" >
?
< head
> < meta charset
= "UTF-8" > < meta name
= "viewport" content
= "width=device-width, initial-scale=1.0" > < title
> Document
< / title
> < script src
= "./build/tracking-min.js" > < / script
> < script src
= "./build/data/face-min.js" > < / script
> < script src
= "./build/data/mouth-min.js" > < / script
> < script src
= "./build/data/eye-min.js" > < / script
> < style
> . rect
{ border
: 2 px solid #a64ceb
; left
: - 1000 px
; position
: absolute
; top
: - 1000 px
; }
?
. demo
- container
{ width
: 100 % ; height
: 530 px
; position
: relative
; background
: #eee
; overflow
: hidden
; border
- bottom
- right
- radius
: 10 px
; border
- bottom
- left
- radius
: 10 px
; }
?
< / style
>
< / head
>
?
< body
> < div
class = "demo-container" > < img src
= "./imgs/2.png" alt
= "" id
= "img" > < / div
>
?
< script
> window
. onload
= function ( ) {
?var tracker
= new tracking
. ObjectTracker ( [ 'face' , 'eye' , 'mouth' ] ) ; tracker
. setStepSize ( 1.7 ) ; tracking
. track ( '#img' , tracker
) ; tracker
. on ( 'track' , function ( event
) { event
. data
. forEach ( function ( rect
) {
?window
. plot ( rect
. x
, rect
. y
, rect
. width
, rect
. height
) ; } ) ; } ) ;
?window
. plot
= function ( x
, y
, w
, h
) { var rect
= document
. createElement ( 'div' ) ; document
. querySelector ( '.demo-container' ) . appendChild ( rect
) ; rect
. classList
. add ( '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
>
?
< / body
>
?
< / html
>
?
html和css比較簡單，這里我們主要來看js代碼。創建識別對象
var tracker
= new tracking
. ObjectTracker ( [ 'face' , 'eye' , 'mouth' ] ) ; tracking
. track ( '#img' , tracker
) ; tracker
. on ( 'track' , function ( event
) { event
. data
. forEach ( function ( rect
) { window
. plot ( rect
. x
, rect
. y
, rect
. width
, rect
. height
) ; } ) ; } ) ;
獲取的event.data是一個數組 ，數組存放識別處理出來的臉部數據，數據結構如下處理識別結果
window
. plot
= function ( x
, y
, w
, h
) { var img
= document
. querySelector ( '#img' ) var rect
= document
. createElement ( 'div' ) ; document
. querySelector ( '.demo-container' ) . appendChild ( rect
) ; rect
. classList
. add ( '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' ; } ;
然后就會看到這樣的結果，會識別出照片的眼睛、鼻子、嘴巴trankingjs使用-識別攝像頭數據
< ! doctype html
>
< html
>
?
< head
> < meta charset
= "utf-8" > < title
> demo
< / title
>
?
< script src
= "./build/tracking-min.js" > < / script
> < script src
= "./build/data/face-min.js" > < / script
> < style
> video
, canvas
{ position
: absolute
; }
?
< / style
>
< / head
>
?
< body
>
?
< div
class = "demo-container" > < video id
= "video" width
= "320" height
= "240" preload autoplay loop muted
> < / video
> < canvas id
= "canvas" width
= "320" height
= "240" > < / canvas
> < / div
>
?
< script
> window
. onload
= function ( ) { var video
= document
. getElementById ( 'video' ) ; var canvas
= document
. getElementById ( 'canvas' ) ; var context
= canvas
. getContext ( '2d' ) ;
?var tracker
= new tracking
. ObjectTracker ( 'face' ) ; tracker
. setInitialScale ( 4 ) ; tracker
. setStepSize ( 2 ) ; tracker
. setEdgesDensity ( 0.1 ) ;
?tracking
. track ( '#video' , tracker
, { camera
: true } ) ;
?tracker
. on ( 'track' , function ( event
) { context
. clearRect ( 0 , 0 , canvas
. width
, canvas
. height
) ; event
. data
. forEach ( function ( rect
) { context
. strokeStyle
= '#a64ceb' ; context
. strokeRect ( rect
. x
, rect
. y
, rect
. width
, rect
. height
) ; } ) ; } ) ;
?
?
} ;
?
< / script
>
?
< / body
>
?
< / html
>
核心js代碼解釋如下創建識別對象
var video
= document
. getElementById ( 'video' ) ; var tracker
= new tracking
. ObjectTracker ( 'face' ) ; tracker
. setInitialScale ( 4 ) ; tracker
. setStepSize ( 2 ) ; tracker
. setEdgesDensity ( 0.1 ) ; tracking
. track ( '#video' , tracker
, { camera
: true } ) ;
?
注意：這里的識別放大比例，步長，邊緣密度等值可以根據攝像頭距離物體遠近自己調整。處理識別結果
var canvas
= document
. getElementById ( 'canvas' ) ; var context
= canvas
. getContext ( '2d' ) ; tracker
. on ( 'track' , function ( event
) { context
. clearRect ( 0 , 0 , canvas
. width
, canvas
. height
) ; event
. data
. forEach ( function ( rect
) { context
. strokeStyle
= '#a64ceb' ; context
. strokeRect ( rect
. x
, rect
. y
, rect
. width
, rect
. height
) ; } ) ; } ) ;
然后啟動起來，瀏覽器會提示是否允許開啟攝像頭！點擊允許，就會看到你英俊瀟灑（沉魚落雁）的臉龐！
總結
以上是生活随笔 為你收集整理的吗咿呀嘿-用js来搞个简单的人脸识别 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
