基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片


Posted in Javascript onSeptember 06, 2015

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

基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片

点击此处下载源码    

HTML

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

<div id="main" style="width:90%"> 
 <div id="photos"></div> 
 <div id="camera"> 
 <div id="cam"></div> 
 <div id="webcam"></div> 
 <div id="buttons"> 
  <div class="button_pane" id="shoot"> 
  <a id="btn_shoot" href="" class="btn_blue">拍照</a> 
  </div> 
  <div class="button_pane hidden" id="upload"> 
  <a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href="" 
  class="btn_green">上传</a> 
  </div> 
 </div> 
 </div> 
</div>

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

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

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

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的调用,可以看下本站文章:Javascript+PHP实现在线拍照功能。调用方法如下:

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 2
var 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是如何操作上传照片的。

PHP

upload.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); //缩略图尺寸154x110 
imagecopyresampled($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。

jQuery

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

script.js-Part 4

webcam.set_hook('onComplete', function(msg){ 
msg = $.parseJSON(msg); //解析json 
if(msg.error){ 
alert(msg.message); 
} 
else { 
var pic = '<a rel="group" href="uploads/'+msg.filename+'"><img src="uploads/small_'+ 
msg.filename+'"></a>'; 
$("#photos").prepend(pic); //将获取的照片信息插入到index.html的#photo里 
initFancyBox(); //调用fancybox插件 
} 
}); 
webcam.set_hook('onError',function(e){ 
cam.html(e); 
}); 
//调用fancybox 
function initFancyBox(){ 
$("a[rel=group]").fancybox({ 
'transitionIn' : 'elastic', 
'transitionOut' : 'elastic', 
'cyclic' : true 
}); 
}

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

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

script.js-Part 5

function loadpic(){ 
 $.getJSON("getpic.php",function(json){ 
 if(json){ 
  $.each(json,function(index,array){ //循环json数据 
  var pic = '<a rel="group" href="uploads/'+array['pic']+'"> 
  <img src="uploads/small_'+array['pic']+'"></a>'; 
  $("#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($row=mysql_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`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 #Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 #Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 #Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 #Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 #Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 #Javascript
You might like
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
javascript实现动态标签云
2015/10/16 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
JSON 数据格式详解
2017/09/13 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
劳动模范获奖感言
2015/07/31 职场文书
MySQL锁机制
2021/04/05 MySQL
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis