使用jQuery+PHP+Mysql實現照片的線上拍攝與瀏覽
- 巴扎黑原創
- 2017-08-15 09:22:211358瀏覽
本文用範例講述如何使用jQuery與PHP及Mysql結合，實現WEB版在線拍照、上傳、顯示瀏覽的功能，ajax交互技術貫穿本文始末，所以本文的讀者要求具備相當熟悉jQuery及其外掛使用和javscript相關知識，具備PHP和Mysql相關知識。
本文範例建立在本站helloweba.com兩篇文章之上，一篇是用於線上拍照的：Javascript+PHP實現線上拍照功能，另一篇是用來瀏覽照片的：Fancybox豐富的彈出層效果。如果您對線上拍照和Fancybox不大了解，可以先參考以上兩篇文章。
HTML
首先，我們要建立一個主頁index.html來展示最新上傳的照片，我們使用jQuery來取得最新的照片，所以這是一個HTML頁面，不需要PHP標籤，當然還要建立一個包含用來拍照和上傳互動所需的HTML結構。
<p id="main" style="width:90%">
<p id="photos"></p>
<p id="camera">
<p id="cam"></p>
<p id="webcam"></p>
<p id="buttons">
<p class="button_pane" id="shoot">
<a id="btn_shoot" href="" class="btn_blue">拍照</a>
</p>
<p class="button_pane hidden" id="upload">
<a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href=""
class="btn_green">上传</a>
</p>
</p>
</p>
</p>我們在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;
以上是使用jQuery+PHP+Mysql實現照片的線上拍攝與瀏覽的詳細內容。更多資訊請關注PHP中文網其他相關文章！