基于jQuery+PHP+Mysql實(shí)現(xiàn)在線拍照和在線瀏覽照片
本文用示例講述了如何使用jQuery與PHP及Mysql結(jié)合，實(shí)現(xiàn)WEB版在線拍照、上傳、顯示瀏覽的功能，ajax交互技術(shù)貫穿本文始末，所以本文的讀者要求具備相當(dāng)熟悉jQuery及其插件使用和javscript相關(guān)知識(shí)，具備PHP和Mysql相關(guān)知識(shí)。
點(diǎn)擊此處下載源碼
HTML
首先，我們要建立一個(gè)主頁(yè)面index.html來(lái)展示最新上傳的照片，我們使用jQuery來(lái)獲取最新的照片，所以這是一個(gè)HTML頁(yè)面，不需要PHP標(biāo)簽，當(dāng)然還要建立一個(gè)包括用來(lái)拍照和上傳交互所需的HTML結(jié)構(gòu)。
<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>
我們?cè)赽ody間加入了以上html代碼，其中#photos用來(lái)加載展示最新上傳的照片；#camera用于加載攝像模塊，包括調(diào)用攝像flash組件webcam，以及拍照和上傳等按鈕。
此外，我們還需要在index.html加載必須的js文件，包括jQuery庫(kù)，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
為了能給大家呈現(xiàn)一個(gè)相當(dāng)美觀的前端界面，我們使用了css3來(lái)實(shí)現(xiàn)一些陰影、圓角和透明度效果，請(qǐng)看：
#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}
這樣你在預(yù)覽index.html時(shí)會(huì)發(fā)現(xiàn)在頁(yè)面的正下方有一個(gè)攝像頭按鈕，默認(rèn)是折疊的。
接下來(lái)我們要做的是，使用jQuery實(shí)現(xiàn)：通過(guò)單擊頁(yè)面正下方攝像頭按鈕，調(diào)用攝像頭組件，并且完成拍照、取消和上傳所需的動(dòng)作。
jQuery
這一切的交互動(dòng)作所需的js我們都寫(xiě)在script.js文件中。首先，我們需要加載攝像頭組件webcam.js，關(guān)于webcam的調(diào)用，可以看下本站文章：Javascript+PHP實(shí)現(xiàn)在線拍照功能。調(diào)用方法如下：
script.js-Part 1
$(function(){
webcam.set_swf_url('js/webcam.swf'); //載入flash攝像組件的路徑
webcam.set_api_url('upload.php'); // 上傳照片的PHP后端處理文件
webcam.set_quality(80); // 設(shè)置圖像質(zhì)量
webcam.set_shutter_sound(true, 'js/shutter.mp3'); //設(shè)置拍照聲音，拍照時(shí)會(huì)發(fā)出“咔嚓”聲
var cam = $("#webcam");
cam.html(
webcam.get_html(cam.width(), cam.height()) //在#webcam中載入攝像組件
);
這時(shí)，還看不到載入攝像頭效果，因?yàn)?camera默認(rèn)是折疊的，繼續(xù)在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;
});
當(dāng)單擊頁(yè)面正下方的攝像頭按鈕時(shí)，默認(rèn)折疊的攝像區(qū)會(huì)向上展開(kāi)，這時(shí)如果您的機(jī)器安裝有攝像頭，則會(huì)加載攝像組件進(jìn)行攝像了。
接下來(lái)，通過(guò)單擊“拍照”完成拍照功能，單擊“取消”則取消剛剛所拍的照片，單擊“上傳”則將所拍的照片上傳到服務(wù)器。
script.js-Part 3
//拍照
$("#btn_shoot").click(function(){
webcam.freeze(); //凍結(jié)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;
});
點(diǎn)擊“上傳”按鈕后，所拍的照片會(huì)提交給后臺(tái)PHP處理，PHP將照片進(jìn)行命名和存盤(pán)入庫(kù)操作，請(qǐng)看PHP是如何操作上傳照片的。
PHP
upload.php所做的事情有：獲取上傳的照片，命名，判斷是否合法的圖片，生成縮略圖，存盤(pán)，寫(xiě)入數(shù)據(jù)庫(kù)，返回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":"文件目錄不可寫(xiě)";}';
exit;
}
$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){ //如果類(lèi)型不是圖片，則刪除
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);
//寫(xiě)入數(shù)據(jù)庫(kù)
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完成照片上傳后，最終會(huì)返回json格式的數(shù)據(jù)給前端攝像組件webcam調(diào)用，現(xiàn)在我們回到script.js。
jQuery
webcam通過(guò)set_hook方法捕捉到后臺(tái)php返回信息，onComplete表示上傳完成，onError則表示錯(cuò)做出錯(cuò)了。
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(); //調(diào)用fancybox插件
}
});
webcam.set_hook('onError',function(e){
cam.html(e);
});
//調(diào)用fancybox
function initFancyBox(){
$("a[rel=group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'cyclic' : true
});
}
說(shuō)明一下，上傳成功后，所拍的照片會(huì)通過(guò)以上js代碼動(dòng)態(tài)的插入到元素#photos里，并且同時(shí)調(diào)用fancybox插件。這時(shí)，點(diǎn)擊剛剛上傳的照片，會(huì)呈現(xiàn)fancybox彈出層效果。注意動(dòng)態(tài)生成的元素必須通過(guò)以上代碼中的initFancyBox()函數(shù)來(lái)調(diào)用fancybox，而不能直接通過(guò)fancybox()來(lái)調(diào)用，否則將不會(huì)有彈出層效果。
接下來(lái)，script.js還需要做一件事就是：動(dòng)態(tài)載入最新的照片，展示在頁(yè)面上，我們通過(guò)jquery的.getJSON()方法來(lái)完成ajax請(qǐng)求。
script.js-Part 5
function loadpic(){
$.getJSON("getpic.php",function(json){
if(json){
$.each(json,function(index,array){ //循環(huán)json數(shù)據(jù)
var pic = '<a rel="group" href="uploads/'+array['pic']+'">
<img src="uploads/small_'+array['pic']+'"></a>';
$("#photos").prepend(pic);
});
}
initFancyBox(); //調(diào)用fancybox插件
});
}
loadpic();
函數(shù)loadpic()向服務(wù)器getpic.php發(fā)送get請(qǐng)求，并將返回的json數(shù)據(jù)進(jìn)行解析，將照片信息動(dòng)態(tài)插入到元素#photos下，并調(diào)用fancybox插件，然后，別忘了在頁(yè)面載入后調(diào)用loadpic()。
PHP
最后，由后臺(tái)getpic.php來(lái)獲取數(shù)據(jù)庫(kù)中的上傳圖片并且返回json給前端。
include_once("connect.php"); //連接數(shù)據(jù)庫(kù)
//查詢數(shù)據(jù)表中最新的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數(shù)據(jù)
echo json_encode($arr);
最后，附上數(shù)據(jù)photobooth結(jié)構(gòu)：
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;
相關(guān)文章
arrayToJson將數(shù)組轉(zhuǎn)化為json格式的js代碼
arrayToJson將數(shù)組轉(zhuǎn)化為json格式的js代碼，需要的朋友可以參考下。2010-10-10
node.js使用nodemailer發(fā)送郵件實(shí)例
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下2014-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框(加滾動(dòng)條)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框，附加滾動(dòng)條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JavaScript中的函數(shù)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
js如何判斷對(duì)象數(shù)組中是否存在某個(gè)對(duì)象
這篇文章主要介紹了js如何判斷對(duì)象數(shù)組中是否存在某個(gè)對(duì)象問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了javascript?Redux的狀態(tài)管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
極簡(jiǎn)主義法編寫(xiě)JavaScript類(lèi)
荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法，他稱這種方法為"極簡(jiǎn)主義法"（minimalist approach）。下面通過(guò)本文給大家分享極簡(jiǎn)主義法編寫(xiě)JavaScript類(lèi)的相關(guān)知識(shí)，一起看看吧2017-11-11
JavaScript表單驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了深入淺出webpack之externals的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
js生成1到100的隨機(jī)數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法
在本篇文章里小編給大家整理了關(guān)于js生成1到100的隨機(jī)數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法，有需要的朋友們可以學(xué)習(xí)下。2020-02-02