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

项目需求:在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),根据需求选择使用



    
        
        
        webcam
        

        
        

        
        

    

    

        

你可能感兴趣的:(使用jquery-webcam插件,实现人脸采集并转base64)