前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

tracking。js是一個開源(BSD協議)的計算機視覺外掛,在不同的瀏覽器中有不同的計算機視覺演算法和技術,透過使用現代HTML5規範,能夠實現實時顏色跟蹤、人臉檢測等功能,介面直觀、核心檔案輕量。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

1、下載及例項

https://github.com/eduardolundgren/tracking.js

首先,下載這個專案,這個專案包括所有的tracking。js的例子、原始碼、依賴等。解壓把檔案放到專案的任意位置, 在頁面中引入tracking-min。js檔案。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

然後,在頁面中建立img和canvas元素,img是需要識別的圖片,canvas識別後生成圖片所需容器。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

最後,執行如下指令碼程式碼即可實現一個簡單的圖片特徵識別。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

npm安裝命令:npm install tracking

bower安裝命令:bower install tracking

2、基礎功能展示

①檢測影片中的顏色

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

②人臉檢測

人臉檢測需要額外引入face-min。js檔案。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

③檢測臉、眼睛和嘴

和上面一樣需要額外引入3個檔案,分別是face-min。js(臉)、eye-min。js(眼睛)、mouth-min。js(嘴)。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

④檢測特定的顏色

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

⑤兩幅圖相似點匹配

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

⑥使用攝像頭檢測人臉

攝像頭相關的都需要引入dat。gui。min。js檔案。

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

⑦攝像頭影象特徵

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

前端開發:一個在web上實現計算機視覺的現代方法(tracking.js)

這是攝像頭拍到蘋果手機部分背面的特徵點

檢視更多例子請前往官方網站:

https://trackingjs.com/examples/face_tag_friends.html

有哪裡寫得不好的地方請大家提出來,請輕噴,謝謝。 同時有什麼與程式設計相關的好東西可以推舉給我,再次感謝!