使用jquery-webcam插件，實現人臉采集并轉base64

cnio 發布于2019-08-01 17:15 / 970人閱讀

摘要：項目需求在或瀏覽器下，調用電腦攝像頭確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機，進行人臉圖像采集預覽，并將圖片的碼傳入到后臺進行后續操作。該適用于和以上，以下版本的未測試。前期插件準備版本以上即可地址作者主頁地址這里。

項目需求：在ie或chrome瀏覽器下，調用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機），進行人臉圖像采集預覽，并將圖片的base64碼傳入到后臺進行后續操作。該demo適用于chrome和ie10以上，ie10以下版本的未測試。

前期插件準備

jquery：1.5版本以上即可

jquery-webcam：github地址, 作者主頁地址這里。該插件下載好后我們需要如下四個文件并與下面測試的HTML放在同一目錄下：

測試頁面

測試前注意事項:

測試html文件必須使用http請求方式打開，不可以通過本地file://請求直接打開，會報錯：webcam.capture is not a function

在進行chrome和ie同時調試，或者打開多個頁面調試的時候，務必關閉前一頁面，解除前頁面對攝像頭的占用，否則后一頁面調用攝像頭后會顯示黑屏或白屏

因為console.log打印的日志長度是有限制的，所以直接通過console.log打印的base64碼是不完整的，因此將該base64碼復制到瀏覽器地址欄打開進行圖像預覽的時會無法顯示圖片。
解決辦法：我們可以將完整的base64碼直接設置給預覽img的src，然后通過開發者工具F12取得的base64碼便是完整的

`base64image.setAttribute("src", base64);`

html代碼：
以下代碼是基于原作者的demo頁進行的部分修改，并使用了兩種預覽模式（canvas和img），根據需求選擇使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51053.html

使用jquery-webcam插件，實現人臉采集并轉base64

摘要：項目需求在或瀏覽器下，調用電腦攝像頭確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機，進行人臉圖像采集預覽，并將圖片的碼傳入到后臺進行后續操作。該適用于和以上，以下版本的未測試。前期插件準備版本以上即可地址作者主頁地址這里。項目需求：在ie或chrome瀏覽器下，調用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機），進行人臉圖像采集預覽，并將圖片的base6...

chenatu 2019-08-20 18:18 評論0 收藏0
cnn卷積神經網絡打造人臉登錄系統

摘要：本文基于環境，采用為基礎來構建實時人臉檢測與識別系統，探索人臉識別系統在現實應用中的難點。對于人臉檢測方法，效果好于的方法，但是檢測力度也難以達到現場應用標準。本文中，我們采用了基于深度學習方法的人臉檢測系統。 git地址：https://github.com/chenlinzho... 本文主要介紹了系統涉及的人臉檢測與識別的詳細方法，該系統基于python2.7.10/opencv...

jackwang 2019-06-28 16:54 評論0 收藏0
cnn卷積神經網絡打造人臉登錄系統

摘要：本文基于環境，采用為基礎來構建實時人臉檢測與識別系統，探索人臉識別系統在現實應用中的難點。對于人臉檢測方法，效果好于的方法，但是檢測力度也難以達到現場應用標準。本文中，我們采用了基于深度學習方法的人臉檢測系統。 git地址：https://github.com/chenlinzho... 本文主要介紹了系統涉及的人臉檢測與識別的詳細方法，該系統基于python2.7.10/opencv...

KavenFan 2019-07-30 18:41 評論0 收藏0
圖片上傳預覽轉壓縮并轉base64詳解（dShowImg64.js）

摘要：本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內，可以選擇文件，移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello，大家好，游戲開始了，歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說，先上圖。showImg(https://segmentfault.com/img...

NeverSayNever 2019-08-29 17:00 評論0 收藏0