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

时间：2023-04-02 11:45:11 HTML

项目要求：在ie或chrome浏览器中调用电脑摄像头（确保你使用的是笔记本电脑或台式机，摄像头功能正常），并进行人脸图像的采集和预览，并将图像的base64编码传递给后台进行后续操作。本demo适用于chrome和ie10以上版本，ie10以下版本未测试。插件前置准备jquery：1.5以上版本即可jquery-webcam：github地址，作者主页地址在此。插件下载完成后，我们需要以下四个文件，将其与下面测试的html放在同一目录下：测试页面测试前注意：测试html文件必须用http请求打开，不能直接请求通过本地文件://打开，会报错：webcam.captureisnotafunction当同时调试chrome和ie，或者打开多个页面进行调试时，一定要关闭前一个页面，然后release上一页不占用摄像头，否则下一页会调用摄像头。将显示黑色或白色屏幕。由于console.log打印的日志长度有限，直接通过console.log打印的base64编码不完整，所以将base64编码复制到浏览器地址栏打开图片预览，无法显示图片。解决方法：我们可以直接将完整的base64编码设置为预览img的src，然后通过开发者工具F12获取的base64编码就是完整的`base64image.setAttribute('src',base64);`html代码：如下code是在原作者的demo页面的基础上进行了部分修改，并使用了两种预览模式（canvas和img），根据需要选择使用根据您的需要高度：自动；向左飘浮;}#base64image{显示：块；宽度：320px；高度：240px；}<脚本src="jquery.webcam.js">

varpos=0,ctx=null,image=[];变量w=320;变量h=240;$(document).ready(function(){jQuery("#webcam").webcam({width:320,height:240,mode:"callback",swffile:"jscam_canvas_only.swf",//这里导入swf文件，注意路径onTick:function(remain){},onSave:function(data){varcol=data.split(";");varimg=image;for(vari=0;i<320;i++){vartmp=parseInt(col[i]);img.data[pos+0]=(tmp>>16)&0xff;img.data[pos+1]=(tmp>>8)&0xff;img.data[pos+2]=tmp&0xff;img.data[pos+3]=0xff;位置+=4；}if(pos>=4*320*240){//在画布上显示图片ctx.putImageData(img,0,0);//获取图片的base64编码varbase64=canvas.toDataURL("image/png");//设置图片base64编码为imgvarbase64image=document.getElementById('base64image');base64image.setAttribute('src',base64);位置=0;}},onCapture:function(){webcam.save();//例如显示一个flash},debug:function(type,string){console.log('type:'+type+',string:'+string);//将调试信息写入console.log()或div},onLoad:function(){//页面加载}});window.addEventListener("load",function(){varcanvas=document.getElementById("canvas");if(canvas.getContext){ctx=canvas.getContext("2d");ctx.clearRect(0,0,320,240);varimg=newImage();img.onload=function(){ctx.drawImage(img,129,89);}图像=ctx.getImageData(0,0,320,240);}}，错误的）;$('#snapBtn').on('click',function(){webcam.capture();});});

上一篇：前端不得不说的数据结构

下一篇：url中#(hash)的含义

使用jquery-webcam插件实现人脸采集转base64相关文章