国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 使用用js實現(xiàn)簡單的人臉識別

使用用js實現(xiàn)簡單的人臉識別

來源:千鋒教育
發(fā)布人:syq
時間: 2022-07-28 17:05:00 1658999100

  緣起

  "螞蟻呀嘿,螞蟻呀呼,螞蟻呀哈" 相信最近好多人的朋友圈或者抖音都被類似視頻刷過屏!

圖片1

  類似的效果最早是在2020年初,那個時候大家應(yīng)該還都記得,幾乎所有的人都因為疫情原因被迫線上辦公!

  工作當(dāng)然離不開開會了,這點歪果仁和中國很像,國內(nèi)我們一般用qq或者釘釘來個在線視頻會議!歪果仁也會經(jīng)常開線上會議,不過他們用的最多的是zoom這個軟件。經(jīng)常的在線會會讓人很煩躁,為什么呢?原本在家辦公就不用洗頭了,但是為了開在線視頻會議還得去專門洗個頭!

  so,一個來自俄羅斯程序猿就想了一個招數(shù)惡搞一下他的同事。他基于 first-order-model 做了一個叫做Avatarify 的軟件,并且放在了全世界做大的同性交友網(wǎng)站github上。First Order Motion Model for Image Animation 簡單來說就是把一張圖片變成動態(tài)的。Avatarify ,看起來很熟悉的名字,你肯定聽過一部叫阿凡達的電影!之后程序猿小哥又基于Avatarify 做了一個蘋果app,在網(wǎng)上掀起了嗎咿呀嘿旋風(fēng),不過在上架appstore7天后在中國區(qū)就被下架了,原因不得而知。

  來看一下 First Order Motion Model上的圖片動畫結(jié)果

2

  First Order Motion Model上的swap face結(jié)果

3

  看完以后大概能明白為什么被下架了!如果東西能被普通人隨便使用,那么我們的表情甚至動作都能被別人模擬出來,只要他有一張你的照片!所以說人臉識別不是絕對安全,什么都可以被模擬!這兩天的315晚會不知道大家看沒有看,好多商家都在非法收集的臉部信息!

  上面我們提到的庫都是python的,app實現(xiàn)這樣的功能都是把圖片或者視頻傳輸給服務(wù)器,然后服務(wù)器處理文件。

  瀏覽器環(huán)境人臉識別

  我們今天要在瀏覽器環(huán)境下面實現(xiàn)一個簡單的人臉識別,我們會用到Tracking.js ,這是一個獨立的JavaScript庫,用于跟蹤從相機或者圖片實時收到的數(shù)據(jù)。跟蹤的數(shù)據(jù)既可以是顏色,也可以是人,也就是說我們可以通過檢測到某特定顏色,或者檢測一個人體/臉的出現(xiàn)與移動,來觸發(fā)JavaScript 事件。

  trankingjs下載

  我們需要先點擊后面的標(biāo)簽下載trankingjs

4

  trankingjs使用-識別圖片

  引入 tracking-min.js人臉識別庫

  引入face-min.js,eye-min.js,mouth-min.js 臉部,眼睛,嘴巴等模型文件

  創(chuàng)建html文件,內(nèi)容如下

5

5.1

  tml和css比較簡單,這里我們主要來看js代碼。

  注意js代碼必須一定要寫在window.onload 回調(diào)函數(shù)里面,否者獲取不到圖片的數(shù)據(jù),就沒有辦法對圖片進行識別。

  創(chuàng)建識別對象

6

  獲取的event.data是一個數(shù)組 ,數(shù)組存放識別處理出來的臉部數(shù)據(jù),數(shù)據(jù)結(jié)構(gòu)如下

  {width: 61, height: 61, x: 244, y: 125}

  x和y是識別出來元素的坐標(biāo),width和height是識別出來元素的寬度

  處理識別結(jié)果

  接下來我們只要需要把得到的結(jié)果標(biāo)記到圖片的對應(yīng)的位置即可,通過plot函數(shù)創(chuàng)建一個div,給定對應(yīng)的坐標(biāo)和寬高

7

  然后就會看到這樣的結(jié)果,會識別出照片的眼睛、鼻子、嘴巴

8

  trankingjs使用-識別攝像頭數(shù)據(jù)

  創(chuàng)建html文件,寫入如下代碼

9

9.1

  核心js代碼解釋如下

  創(chuàng)建識別對象

  創(chuàng)建識別對象并且啟用攝像頭,將攝像頭內(nèi)容輸出到video標(biāo)簽上

10

  注意:這里的識別放大比例,步長,邊緣密度等值可以根據(jù)攝像頭距離物體遠(yuǎn)近自己調(diào)整。

  處理識別結(jié)果

11

  然后啟動起來,瀏覽器會提示是否允許開啟攝像頭!點擊允許,就會看到你英俊瀟灑(沉魚落雁)的臉龐!

12

  最后

  最近剛好也有同學(xué)再問怎么在前端通過攝像頭獲取用戶的頭像,用本文的內(nèi)容剛好可以來了解一下前端瀏覽器環(huán)境下怎么識別人臉,用本文的內(nèi)容做一個人臉識別登錄也是可以的!

  更多關(guān)于前端培訓(xùn)的問題,歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗,采用全程面授高品質(zhì)、高體驗培養(yǎng)模式,擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù),助力更多學(xué)員實現(xiàn)高薪夢想。

  注:本文部分文字和圖片來源于網(wǎng)絡(luò),如有侵權(quán),請聯(lián)系刪除。版權(quán)歸原作者所有!

 

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
云快照與自動備份有什么區(qū)別?

1、定義和目標(biāo)不同云快照的主要目標(biāo)是提供一種快速恢復(fù)數(shù)據(jù)的方法,它只記錄在快照時間點后的數(shù)據(jù)變化,而不是所有的數(shù)據(jù)。自動備份的主要目標(biāo)...詳情>>

2023-10-14 12:48:59
服務(wù)器為什么要用Linux?

服務(wù)器為什么要用Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,Linux在眾多選擇中脫穎而出。Linux作為服務(wù)器操作系統(tǒng)的優(yōu)選,有其獨特的優(yōu)勢和特點。包括其...詳情>>

2023-10-14 12:34:11
ORM解決的主要問題是什么?

ORM(對象關(guān)系映射)解決的主要問題是將關(guān)系數(shù)據(jù)庫與面向?qū)ο缶幊讨g的映射困境。在傳統(tǒng)的關(guān)系數(shù)據(jù)庫中,數(shù)據(jù)以表格的形式存儲,而在面向?qū)ο?..詳情>>

2023-10-14 12:26:19
Go為什么不支持三元運算符?

Go為什么不支持三元運算符Go語言是一種以簡潔和有效性為目標(biāo)的編程語言,因此在設(shè)計過程中,Go的設(shè)計者刻意排除了一些他們認(rèn)為可能導(dǎo)致復(fù)雜性或...詳情>>

2023-10-14 12:12:36
IT通常說的平臺是什么意思?

在信息技術(shù)(IT)領(lǐng)域,”平臺”這個詞有著廣泛的含義,它常常指代支持軟件應(yīng)用開發(fā)和運行的基礎(chǔ)框架和環(huán)境。以下是對”平臺”這個概念的更深入...詳情>>

2023-10-14 11:55:36