萍乡网站建设哪家好哦,网站建设yu,郑州网页制作案例,青海西宁今天刚刚紧急通知本文示例建立在本站helloweba.net两篇文章之上#xff0c;一篇是用于在线拍照的#xff1a;JavascriptPHP实现在线拍照功能#xff0c;另一篇是用于浏览照片的#xff1a;Fancybox丰富的弹出层效果。如果您对在线拍照和Fancybox不大了解#xff0c;可以先参照以上两篇文章…本文示例建立在本站helloweba.net两篇文章之上一篇是用于在线拍照的JavascriptPHP实现在线拍照功能另一篇是用于浏览照片的Fancybox丰富的弹出层效果。如果您对在线拍照和Fancybox不大了解可以先参照以上两篇文章。HTML首先我们要建立一个主页面index.html来展示最新上传的照片我们使用jQuery来获取最新的照片所以这是一个HTML页面不需要PHP标签当然还要建立一个包括用来拍照和上传交互所需的HTML结构。拍照取消 classbtn_green上传我们在body间加入了以上html代码其中#photos用来加载展示最新上传的照片#camera用于加载摄像模块包括调用摄像flash组件webcam以及拍照和上传等按钮。此外我们还需要在index.html加载必须的js文件包括jQuery库fancybox插件flash摄像组件webcam.js以及本示例组合各种操作所需的script.js。CSS为了能给大家呈现一个相当美观的前端界面我们使用了css3来实现一些阴影、圆角和透明度效果请看#photos{width:80%; margin:40px auto}#photos:hover a{opacity:0.5}#photos a:hover{opacity:1}#camera{width:598px; height:525px; position:fixed; bottom:-466px; left:50%; margin-left:-300px;border:1px solid #f0f0f0; background:url(images/cam_bg.jpg) repeat-y; -moz-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; -moz-box-shadow:0 0 4px rgba(0,0,0,0.6); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6); box-shadow:0 0 4px rgba(0,0,0,0.6);}#cam{width:100%; height:66px; display:block; position:absolute; top:0; left:0; background:url(images/cam.png) no-repeat center center; cursor:pointer}#webcam{width:520px; height:370px; margin:66px auto 22px; line-height:360px; background:#ccc;color:#666; text-align:center}.button_pane{text-align:center;}.btn_blue,.btn_green{width:99px; height:38px; line-height:32px; margin:0 4px; border:none;display:inline-block; text-align:center; font-size:14px; color:#fff !important;text-shadow:1px 1px 1px #277c9b; background:url(images/buttons.png) no-repeat}.btn_green{background:url(images/buttons.png) no-repeat right top;text-shadow:1px 1px 1px #498917;}.hidden{display:none}这样你在预览index.html时会发现在页面的正下方有一个摄像头按钮默认是折叠的。接下来我们要做的是使用jQuery实现通过单击页面正下方摄像头按钮调用摄像头组件并且完成拍照、取消和上传所需的动作。jQuery这一切的交互动作所需的js我们都写在script.js文件中。首先我们需要加载摄像头组件webcam.js关于webcam的调用可以看下本站文章JavascriptPHP实现在线拍照功能。调用方法如下script.js-Part 1$(function(){webcam.set_swf_url(js/webcam.swf); //载入flash摄像组件的路径webcam.set_api_url(upload.php);// 上传照片的PHP后端处理文件webcam.set_quality(80);// 设置图像质量webcam.set_shutter_sound(true, js/shutter.mp3); //设置拍照声音拍照时会发出“咔嚓”声var cam $(#webcam);cam.html(webcam.get_html(cam.width(), cam.height()) //在#webcam中载入摄像组件);这时还看不到载入摄像头效果因为#camera默认是折叠的继续在script.js中加入以下代码script.js-Part 2var camera $(#camera);var shown false;$(#cam).click(function(){if(shown){camera.animate({bottom:-466});}else {camera.animate({bottom:-5});}shown !shown;});当单击页面正下方的摄像头按钮时默认折叠的摄像区会向上展开这时如果您的机器安装有摄像头则会加载摄像组件进行摄像了。接下来通过单击“拍照”完成拍照功能单击“取消”则取消刚刚所拍的照片单击“上传”则将所拍的照片上传到服务器。script.js-Part 3//拍照$(#btn_shoot).click(function(){webcam.freeze(); //冻结webcam摄像头停止工作$(#shoot).hide(); //隐藏拍照按钮$(#upload).show(); //显示取消和上传按钮return false;});//取消拍照$(#btn_cancel).click(function(){webcam.reset(); //重置webcam摄像头重新工作$(#shoot).show(); //显示拍照按钮$(#upload).hide(); //隐藏取消和上传按钮return false;});//上传照片$(#btn_upload).click(function(){webcam.upload(); //上传webcam.reset();//重置webcam摄像头重新工作$(#shoot).show();//显示拍照按钮$(#upload).hide(); //隐藏取消和上传按钮return false;});点击“上传”按钮后所拍的照片会提交给后台PHP处理PHP将照片进行命名和存盘入库操作请看PHP是如何操作上传照片的。PHPupload.php所做的事情有获取上传的照片命名判断是否合法的图片生成缩略图存盘写入数据库返回JSON信息给前端。$folder uploads/; //上传照片保存路径$filename date(YmdHis).rand()..jpg; //命名照片名称$original $folder.$filename;$input file_get_contents(php://input);if(md5($input) 7d4df9cc423720b7f1f3d672b89362be){exit; //如果上传的是空白的照片则终止程序}$result file_put_contents($original, $input);if (!$result) {echo {error:1,message:文件目录不可写;};exit;}$info getimagesize($original);if($info[mime] ! image/jpeg){ //如果类型不是图片则删除unlink($original);exit;}//生成缩略图$origImage imagecreatefromjpeg($original);$newImage imagecreatetruecolor(154,110); //缩略图尺寸154x110imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370);imagejpeg($newImage,uploads/small_.$filename);//写入数据库include_once(connect.php);$time mktime();$sql insert into photobooth (pic,uploadtime)values($filename,$time);$res mysql_query($sql);if($res){//输出JSON信息echo {status:1,message:Success!,filename:.$filename.};}else{echo {error:1,message:Sorry,something goes wrong.;};}upload.php完成照片上传后最终会返回json格式的数据给前端摄像组件webcam调用现在我们回到script.js。jQuerywebcam通过set_hook方法捕捉到后台php返回信息onComplete表示上传完成onError则表示错做出错了。script.js-Part 4webcam.set_hook(onComplete, function(msg){msg $.parseJSON(msg); //解析jsonif(msg.error){alert(msg.message);}else {var pic ;$(#photos).prepend(pic); //将获取的照片信息插入到index.html的#photo里initFancyBox(); //调用fancybox插件}});webcam.set_hook(onError,function(e){cam.html(e);});//调用fancyboxfunction initFancyBox(){$(a[relgroup]).fancybox({transitionIn: elastic,transitionOut: elastic,cyclic : true});}说明一下上传成功后所拍的照片会通过以上js代码动态的插入到元素#photos里并且同时调用fancybox插件。这时点击刚刚上传的照片会呈现fancybox弹出层效果。注意动态生成的元素必须通过以上代码中的initFancyBox()函数来调用fancybox而不能直接通过fancybox()来调用否则将不会有弹出层效果。接下来script.js还需要做一件事就是动态载入最新的照片展示在页面上我们通过jquery的.getJSON()方法来完成ajax请求。script.js-Part 5function loadpic(){$.getJSON(getpic.php,function(json){if(json){$.each(json,function(index,array){ //循环json数据var pic ;$(#photos).prepend(pic);});}initFancyBox(); //调用fancybox插件});}loadpic();函数loadpic()向服务器getpic.php发送get请求并将返回的json数据进行解析将照片信息动态插入到元素#photos下并调用fancybox插件然后别忘了在页面载入后调用loadpic()。PHP最后由后台getpic.php来获取数据库中的上传图片并且返回json给前端。include_once(connect.php); //连接数据库//查询数据表中最新的50条记录$query mysql_query(select pic from photobooth order by id desc limit 50);while($rowmysql_fetch_array($query)){$arr[] array(pic $row[pic]);}//输出json数据echo json_encode($arr);最后附上数据photobooth结构CREATE TABLE photobooth (id int(11) NOT NULL auto_increment,pic varchar(50) NOT NULL,uploadtime int(10) NOT NULL,PRIMARY KEY (id)) ENGINEMyISAM DEFAULT CHARSETutf8;转载https://www.helloweba.net/javascript/179.html
