使用jquery-webcam插件，实现人脸采集并转base64

chenatu 发布于2019-08-20 18:18 / 1762人阅读

摘要：项目需求在或浏览器下，调用电脑摄像头确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机，进行人脸图像采集预览，并将图片的码传入到后台进行后续操作。该适用于和以上，以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。

项目需求：在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），根据需求选择使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84315.html

使用jquery-webcam插件，实现人脸采集并转base64

摘要：项目需求在或浏览器下，调用电脑摄像头确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机，进行人脸图像采集预览，并将图片的码传入到后台进行后续操作。该适用于和以上，以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。项目需求：在ie或chrome浏览器下，调用电脑摄像头（确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机），进行人脸图像采集预览，并将图片的base6...

cnio 2019-08-01 17:15 评论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