A-A+

jQuery+PHP+Mysql在线拍照和在线浏览照片

2016年01月12日 web前端设计 暂无评论 阅读 7 views 次

在线拍照通常是通过flash插件来实现了,今天我看到有一篇基本jQuery+PHP+Mysql在线拍照和在线浏览照片的例子,下面我们一起来看看,希望例子对各位有帮助。

本文用示例讲述了如何使用jQuery与PHP及Mysql结合,实现WEB版在线拍照、上传、显示浏览的功能,ajax交互技术贯穿本文始末,所以本文的读者要求具备相当熟悉jQuery及其插件使用和javscript相关知识,具备PHP和Mysql相关知识。

本文示例建立在本站helloweba.com两篇文章之上,一篇是用于在线拍照的:Javascript+PHP实现在线拍照功能,另一篇是用于浏览照片的:Fancybox丰富的弹出层效果。如果您对在线拍照和Fancybox不大了解,可以先参照以上两篇文章。

HTML:首先,我们要建立一个主页面index.html来展示最新上传的照片,我们使用jQuery来获取最新的照片,所以这是一个HTML页面,不需要PHP标签,当然还要建立一个包括用来拍照和上传交互所需的HTML结构。

  1. <div id="main" style="width:90%">   
  2.    <div id="photos"></div>   
  3.       
  4.    <div id="camera">   
  5.        <div id="cam"></div>   
  6.        <div id="webcam"></div>   
  7.        <div id="buttons">   
  8.           <div class="button_pane" id="shoot">   
  9.             <a id="btn_shoot" href="" class="btn_blue">拍照</a>   
  10.           </div>   
  11.           <div class="button_pane hidden" id="upload">   
  12.             <a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href=""    
  13.             class="btn_green">上传</a>   
  14.           </div>   
  15.        </div>   
  16.    </div>   
  17. </div>  

我们在body间加入了以上html代码,其中#photos用来加载展示最新上传的照片;#camera用于加载摄像模块,包括调用摄像flash组件webcam,以及拍照和上传等按钮。

此外,我们还需要在index.html加载必须的js文件,包括jQuery库,fancybox插件,flash摄像组件:webcam.js以及本示例组合各种操作所需的script.js。

  1. <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />   
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/   
  3. jquery.min.js"></script>   
  4. <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>   
  5. <script type="text/javascript" src="js/webcam.js"></script>   
  6. <script type="text/javascript" src="js/script.js"></script>  

CSS

为了能给大家呈现一个相当美观的前端界面,我们使用了css3来实现一些阴影、圆角和透明度效果,请看:

  1. #photos{width:80%; margin:40px auto}   
  2. #photos:hover a{opacity:0.5}   
  3. #photos a:hover{opacity:1}   
  4.    
  5. #camera{width:598pxheight:525pxposition:fixedbottombottom:-466pxleft:50%; margin-left:-300px;   
  6. border:1px solid #f0f0f0background:url(images/cam_bg.jpg) repeat-y; -moz-border-radius:   
  7. 4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; -moz-box-shadow:   
  8. 0 0 4px rgba(0,0,0,0.6); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6); box-shadow:   
  9. 0 0 4px rgba(0,0,0,0.6);}   
  10. #cam{width:100%; height:66pxdisplay:blockposition:absolutetop:0; left:0; background:   
  11. url(images/cam.png) no-repeat center centercursor:pointer}   
  12. #webcam{width:520pxheight:370pxmargin:66px auto 22pxline-height:360pxbackground:#ccc;    
  13. color:#666text-align:center}   
  14. .button_pane{text-align:center;}   
  15. .btn_blue,.btn_green{width:99pxheight:38pxline-height:32pxmargin:0 4pxborder:none;    
  16. display:inline-blocktext-align:centerfont-size:14pxcolor:#fff !important;    
  17. text-shadow:1px 1px 1px #277c9bbackground:url(images/buttons.png) no-repeat}   
  18. .btn_green{background:url(images/buttons.png) no-repeat rightright top;   
  19. text-shadow:1px 1px 1px #498917;}   
  20. .hidden{display:none}  

这样你在预览index.html时会发现在页面的正下方有一个摄像头按钮,默认是折叠的。

接下来我们要做的是,使用jQuery实现:通过单击页面正下方摄像头按钮,调用摄像头组件,并且完成拍照、取消和上传所需的动作。

jQuery

这一切的交互动作所需的js我们都写在script.js文件中。首先,我们需要加载摄像头组件webcam.js,关于webcam的调用,可以看下本站文章:Javascript+PHP实现在线拍照功能。调用方法如下:

  1. script.js-Part 1  
  2. $(function(){   
  3.     webcam.set_swf_url('js/webcam.swf'); //载入flash摄像组件的路径   
  4.     webcam.set_api_url('upload.php');    // 上传照片的PHP后端处理文件   
  5.     webcam.set_quality(80);                // 设置图像质量   
  6.     webcam.set_shutter_sound(true, 'js/shutter.mp3'); //设置拍照声音,拍照时会发出“咔嚓”声   
  7.     var cam = $("#webcam");   
  8.     cam.html(   
  9.         webcam.get_html(cam.width(), cam.height())  //在#webcam中载入摄像组件   
  10.     );  

这时,还看不到载入摄像头效果,因为#camera默认是折叠的,继续在script.js中加入以下代码:

  1. script.js-Part 2  
  2. var camera = $("#camera");   
  3. var shown = false;   
  4. $('#cam').click(function(){   
  5.            
  6.     if(shown){   
  7.         camera.animate({   
  8.             bottom:-466   
  9.         });   
  10.     }else {   
  11.         camera.animate({   
  12.             bottom:-5   
  13.         });   
  14.     }   
  15.            
  16.     shown = !shown;   
  17. });  

当单击页面正下方的摄像头按钮时,默认折叠的摄像区会向上展开,这时如果您的机器安装有摄像头,则会加载摄像组件进行摄像了,接下来,通过单击“拍照”完成拍照功能,单击“取消”则取消刚刚所拍的照片,单击“上传”则将所拍的照片上传到服务器。

  1. script.js-Part 3  
  2. //拍照   
  3. $("#btn_shoot").click(function(){   
  4.     webcam.freeze();  //冻结webcam,摄像头停止工作   
  5.     $("#shoot").hide(); //隐藏拍照按钮   
  6.     $("#upload").show(); //显示取消和上传按钮   
  7.     return false;   
  8. });   
  9.    
  10. //取消拍照   
  11. $('#btn_cancel').click(function(){   
  12.     webcam.reset();  //重置webcam,摄像头重新工作   
  13.     $("#shoot").show(); //显示拍照按钮   
  14.     $("#upload").hide(); //隐藏取消和上传按钮   
  15.     return false;   
  16. });   
  17.    
  18. //上传照片   
  19. $('#btn_upload').click(function(){   
  20.     webcam.upload(); //上传   
  21.     webcam.reset();//重置webcam,摄像头重新工作   
  22.     $("#shoot").show();//显示拍照按钮   
  23.     $("#upload").hide(); //隐藏取消和上传按钮   
  24.     return false;   
  25. });  

点击“上传”按钮后,所拍的照片会提交给后台PHP处理,PHP将照片进行命名和存盘入库操作,请看PHP是如何操作上传照片的。

PHP

upload.php所做的事情有:获取上传的照片,命名,判断是否合法的图片,生成缩略图,存盘,写入数据库,返回JSON信息给前端。

  1. $folder = 'uploads/'; //上传照片保存路径   
  2. $filename = date('YmdHis').rand().'.jpg';  //命名照片名称   
  3. $original = $folder.$filename;   
  4.    
  5. $input = file_get_contents('php://input');   
  6. if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){   
  7.     exit;   //如果上传的是空白的照片,则终止程序   
  8. }   
  9. $result = file_put_contents($original$input);   
  10. if (!$result) {   
  11.     echo '{"error":1,"message":"文件目录不可写";}';   
  12.     exit;   
  13. }   
  14.    
  15. $info = getimagesize($original);   
  16. if($info['mime'] != 'image/jpeg'){ //如果类型不是图片,则删除   
  17.     unlink($original);   
  18.     exit;   
  19. }   
  20.   
  21. //生成缩略图   
  22. $origImage = imagecreatefromjpeg($original);   
  23. $newImage = imagecreatetruecolor(154,110);  //缩略图尺寸154x110   
  24. imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370);    
  25. imagejpeg($newImage,'uploads/small_'.$filename);   
  26.   
  27. //写入数据库   
  28. include_once('connect.php');   
  29. $time = mktime();   
  30. $sql = "insert into photobooth (pic,uploadtime)values('$filename','$time')";   
  31. $res = mysql_query($sql);   
  32. if($res){   
  33.     //输出JSON信息   
  34.     echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';   
  35. }else{   
  36.     echo '{"error":1,"message":"Sorry,something goes wrong.";}';   
  37. }  

upload.php完成照片上传后,最终会返回json格式的数据给前端摄像组件webcam调用,现在我们回到script.js。

jQuery

webcam通过set_hook方法捕捉到后台php返回信息,onComplete表示上传完成,onError则表示错做出错了。

  1. script.js-Part 4  
  2. webcam.set_hook('onComplete', function(msg){   
  3.     msg = $.parseJSON(msg); //解析json   
  4.            
  5.     if(msg.error){   
  6.         alert(msg.message);   
  7.     }   
  8.     else {   
  9.         var pic = '<a rel="group" href="uploads/'+msg.filename+'"><img src="uploads/small_'+  
  10.         msg.filename+'"></a>';   
  11.         $("#photos").prepend(pic); //将获取的照片信息插入到index.html的#photo里   
  12.         initFancyBox();  //调用fancybox插件   
  13.     }   
  14. });   
  15.    
  16. webcam.set_hook('onError',function(e){   
  17.     cam.html(e);   
  18. });   
  19.    
  20. //调用fancybox   
  21. function initFancyBox(){   
  22.     $("a[rel=group]").fancybox({   
  23.         'transitionIn'    : 'elastic',   
  24.         'transitionOut'    : 'elastic',   
  25.         'cyclic'        : true   
  26.     });   
  27. }  

说明一下,上传成功后,所拍的照片会通过以上js代码动态的插入到元素#photos里,并且同时调用fancybox插件。这时,点击刚刚上传的照片,会呈现fancybox弹出层效果。注意动态生成的元素必须通过以上代码中的initFancyBox()函数来调用fancybox,而不能直接通过fancybox()来调用,否则将不会有弹出层效果。

接下来,script.js还需要做一件事就是:动态载入最新的照片,展示在页面上,我们通过jquery的.getJSON()方法来完成ajax请求。

  1. script.js-Part 5  
  2. function loadpic(){   
  3.     $.getJSON("getpic.php",function(json){   
  4.         if(json){   
  5.            $.each(json,function(index,array){ //循环json数据   
  6.                var pic = '<a rel="group" href="uploads/'+array['pic']+'">   
  7.                <img src="uploads/small_'+array['pic']+'"></a>';   
  8.                $("#photos").prepend(pic);    
  9.            });    
  10.         }   
  11.         initFancyBox(); //调用fancybox插件   
  12.     });   
  13. }   
  14.    
  15. loadpic();  

函数loadpic()向服务器getpic.php发送get请求,并将返回的json数据进行解析,将照片信息动态插入到元素#photos下,并调用fancybox插件,然后,别忘了在页面载入后调用loadpic()。

PHP

最后,由后台getpic.php来获取数据库中的上传图片并且返回json给前端。

  1. include_once("connect.php"); //连接数据库   
  2. //查询数据表中最新的50条记录   
  3. $query = mysql_query("select pic from photobooth order by id desc limit 50");   
  4. while($row=mysql_fetch_array($query)){   
  5.     $arr[] = array(   
  6.        'pic' => $row['pic']   
  7.     );   
  8. }   
  9. //输出json数据   
  10. echo json_encode($arr);  

最后,附上数据photobooth结构:

  1. CREATE TABLE `photobooth` (   
  2.   `id` int(11) NOT NULL auto_increment,   
  3.   `pic` varchar(50) NOT NULL,   
  4.   `uploadtime` int(10) NOT NULL,   
  5.   PRIMARY KEY  (`id`)   
  6. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;  

给我留言