1、拍照拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：varcanvas=document.createElement(‘canvas’);//动态创建画布对象varctx=canvas.getContext(’2d’);varcw=vw,ch=vh;ctx.fillStyle=”#ffffff”;ctx.fillRect(0,0,cw,ch);ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh);//将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。document.body.append(canvas);
2、图片获取从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。varimgData=canvas.toDataURL(“image/png”);这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，方法是在前端截取22位以后的字符串作为图像数据，例如：vardata=imgData.substr(22);如果要在上传前获取图片的大小，可以使用：varlength=atob(data).length;//atob可解码用base-64解码的字串
3、图片上传在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：$.post(‘upload.php’,{‘data’:data});在后台用PHP脚本接收数据并存储为图片。functionconvert_data($data){$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);save_to_file($image);}functionsave_to_file($image){$fp=fopen($filename,’w’);fwrite($fp,$image);fclose($fp);
