web应用采用webcam实现拍照上传的PHP示例及参数说明

web应用采用webcam实现网页拍照并获取图像的base64数据用于实现抓拍及上传，这里是我实际程序页面的部份核心代码，没有完成整理但核心代码都在这里，有需要自己整理一下吧，页面尾部放了webcam.js文件下载链接。至于PHP端处理上传的代码也放出来了：

PHP后台处理图片上传：

$cammer_img_base64=$_POST["cammer_img_base64"];
$base64_string=explode(',',$cammer_img_base64);//截取data:image/png;base64, 这个逗号后的字符
$data=base64_decode($base64_string[1]);//对截取后的字符使用base64_decode进行解码
file_put_contents($filePath,$data);//写入文件并保存，路径替换成自己的

以下是html前端页面，有部分代码需要自己再整理一下，有点忙顾不上了，不过核心的代码肯定都在。

<form method="post" name="formsafp" id="formsafp" enctype="multipart/form-data" action="?<?=encrypt_url("&picihao=".$v_picihao."&page=".$page."&".$pageurl."&action=editfapiao&time=".time(),$key_url_md_5)?>">
						选择文件：<input name="file" type="file" id="file" title="如不修改请勿选择发票图片" />&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn_big" type="button" onClick="alert_go('确认更新发票？','submit','formsafp','wen','');" title="优先级：选择文件上传优先级大于拍照！" >确认更新</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn_big btn_submit" type="button" onClick="show_open_cammer()" >启动摄像头拍照</button>
                        	<input name="cammer_img_base64" id="cammer_img_base64" type="hidden" value="" />
                        </form>


<script type="text/javascript" src="js/webcam.min.js"></script>
                    <div id="cammer_shot" style="display:none; position:absolute; left:0; top:70px; z-index:2; width:90%; left:5%;">

                        <div style="width:auto; margin:0 auto;background:#f7f7f7; padding:40px; border-radius:15px;">
                        	<div style="clear:both;">
                                <div id="my_camera" style="float:left; width:640px; height:480px;background:#FFFFFF"></div>
                                <div id="results" style="float:right; width:640px; height:480px;background:#FFFFFF; text-align:center; vertical-align:middle; "><div style=" padding-top:100px;font-size:14px;">拍照后照片将显示在这里</div></div>
                            </div>
                            <div style="clear:both; text-align:left; padding-top:20px">
                            	<input type="button" value="开始拍照" onClick="take_snapshot()" class="btn btn_big btn_error">
                                <span id="img_upper" style="display:none">&nbsp;&nbsp; <input type="button"  value="拍照完成并上传" onClick="take_snapshot_upload()" class="btn btn_big btn_success" ></span>
                                &nbsp;&nbsp; <input type="button" value="取消" onClick="$('#cammer_shot').fadeOut();$('#cammer_img_base64').val('');" class="btn btn_big">
                            </div>
						</div>
                        
                        <script language="JavaScript">
                            Webcam.set({
                                width: 640,//实时摄像机查看器的宽度
                                height: 480,
                                dest_width: 640,//捕获相机图像的宽
                                dest_height: 480,
								// crop_width: 300,//最终裁剪图像的宽度(以像素为单位)，默认为dest_width。
        						// crop_height: 300,//最终裁剪图像的高度(以像素为单位)，默认为dest_height。
                                image_format: 'jpeg',//捕获图像的期望图像格式，可以是“jpeg”或“png”。
                                jpeg_quality: 100//对于JPEG图像，这是理想的质量，从0(最差)到100(最好)。
								// enable_flash: true,//启用或禁用Flash回退，如果没有本机网络摄像头访问。
								// force_flash: false,//将此设置为true将始终在adobeflash回退模式下运行。
								// flip_horiz: false,//将此设置为true将水平翻转图像(镜像模式)。
								// fps: 30,//设置所需的fps(帧/秒)捕获速率。
								// swfURL: "./webcam.swf",//为adobeflash回退SWF文件设置一个备用位置
								// flashNotDetectedText: "未检测到flash播放器的文本/html。",//未检测到flash播放器的文本/html。
								// unfreeze_snap: true,//是否在拍照后解冻相机
								// upload_name: "webcam",//在上传摄像头图像文件时使用哪个HTTP POST参数名
                            });
                            //Webcam.attach('#my_camera');

                            function take_snapshot() {
                                Webcam.snap( function(data_uri) {
                                    document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
									$('#cammer_img_base64').val(data_uri);
									$("#img_upper").fadeIn()
                                } );
                            }
							
							function show_open_cammer(){
								$('#cammer_shot').show();
								Webcam.attach('#my_camera');
							}
							
							function take_snapshot_upload(){
								$("#formsafp").submit()
							}
                        </script>
                    </div>

webcam.js文件.zip (23.42 K)