Melaksanakan fotografi dalam talian dan menyemak imbas foto dalam talian berdasarkan kemahiran jQuery PHP Mysql_javascript

Artikel ini menggunakan contoh untuk menerangkan cara menggunakan jQuery digabungkan dengan PHP dan Mysql untuk merealisasikan fungsi fotografi dalam talian, memuat naik dan menyemak imbas paparan versi WEB teknologi interaksi Ajax digunakan di seluruh artikel ini, jadi pembaca artikel ini diperlukan untuk mengetahui penggunaan jQuery dan pemalamnya serta pengetahuan berkaitan javscript, dengan pengetahuan berkaitan PHP dan Mysql.

Klik di siniMuat turun kod sumber  

HTML

Pertama, kami perlu mencipta halaman utama index.html untuk memaparkan foto terkini yang dimuat naik Kami menggunakan jQuery untuk mendapatkan foto terkini, jadi ini adalah HTML halaman, Tidak perlu untuk tag PHP, dan sudah tentu anda perlu mencipta struktur HTML termasuk struktur HTML yang diperlukan untuk mengambil foto dan memuat naik interaksi

<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>

Kami tambah kod html di atas antara badan, Antaranya, #photos digunakan untuk memuatkan dan memaparkan foto terkini yang dimuat naik #kamera digunakan untuk memuatkan modul kamera, termasuk memanggil webcam komponen flash kamera, serta butang untuk mengambil gambar; dan memuat naik.

Selain itu, kami juga perlu memuatkan fail js yang diperlukan dalam index.html, termasuk perpustakaan jQuery, pemalam fancybox, komponen kamera kilat: webcam.js dan skrip yang diperlukan untuk pelbagai operasi dalam contoh ini.

<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

Untuk membentangkan anda dengan antara muka hadapan yang sangat cantik, kami menggunakan css3 untuk mencapai beberapa bayang, sudut bulat dan ketelusan Untuk kesannya, sila lihat:

#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}

Dengan cara ini, apabila anda melihat index.html, anda akan menemui butang kamera betul-betul di bawah halaman, yang diruntuhkan secara lalai.

Perkara seterusnya yang perlu kita lakukan ialah menggunakan jQuery untuk melaksanakan: dengan mengklik butang kamera betul-betul di bawah halaman, panggil komponen kamera dan selesaikan tindakan yang diperlukan untuk mengambil gambar, membatalkan dan memuat naik .

jQuery

Kami menulis semua js yang diperlukan untuk tindakan interaktif ini dalam fail script.js. Pertama, kita perlu memuatkan komponen kamera webcam.js Mengenai panggilan webcam, anda boleh membaca artikel ini: Javascript PHP melaksanakan fungsi pengambilan foto dalam talian. Kaedah panggilan adalah seperti berikut:

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中载入摄像组件 
 );

Pada masa ini, anda tidak dapat melihat kesan kamera yang dimuatkan kerana #camera diruntuhkan secara lalai Teruskan menambah kod berikut pada skrip.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; });

Apabila anda mengklik butang kamera betul-betul di bahagian bawah halaman, kawasan kamera terlipat lalai akan berkembang ke atas pada masa ini, jika mesin anda dilengkapi dengan kamera, komponen kamera akan dimuatkan untuk rakaman.

Seterusnya, klik "Foto" untuk melengkapkan fungsi pengambilan gambar, klik "Batal" untuk membatalkan foto yang baru diambil, dan klik "Muat naik" untuk memuat naik foto yang diambil ke pelayan.

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; 
});

Selepas mengklik butang "Muat Naik", foto yang diambil akan dihantar ke latar belakang PHP untuk diproses PHP akan menamakan dan menyimpan foto tersebut ke dalam pangkalan data.

PHP

upload.php melakukan perkara berikut: dapatkan foto yang dimuat naik, namakannya, tentukan sama ada ia adalah imej yang sah dan jana lakaran kecil , simpan, tulis ke pangkalan data dan kembalikan maklumat JSON ke hujung hadapan.

$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.";}'; 
}

Selepas upload.php melengkapkan muat naik foto, ia akhirnya akan mengembalikan data dalam format json ke kamera web komponen kamera bahagian hadapan untuk memanggil.

jQuery

kamera web menangkap maklumat pengembalian php latar belakang melalui kaedah set_hook onComplete menunjukkan bahawa muat naik telah selesai, dan onError menunjukkan bahawa a ralat telah dibuat.

script.js-Bahagian 4

webcam.set_hook('onComplete', function(msg){ 
msg = $.parseJSON(msg); //解析json 
if(msg.error){ 
alert(msg.message); 
} 
else { 
var pic = &#39;<a rel="group" href="uploads/&#39;+msg.filename+&#39;"><img  src="/static/imghwm/default1.png"  data-src="uploads/small_&#39;+array[&#39;pic&#39;]+&#39;"  class="lazy"   alt="Melaksanakan fotografi dalam talian dan menyemak imbas foto dalam talian berdasarkan kemahiran jQuery PHP Mysql_javascript" ></a>&#39;; 
$("#photos").prepend(pic); //将获取的照片信息插入到index.html的#photo里 
initFancyBox(); //调用fancybox插件 
} 
}); 
webcam.set_hook(&#39;onError&#39;,function(e){ 
cam.html(e); 
}); 
//调用fancybox 
function initFancyBox(){ 
$("a[rel=group]").fancybox({ 
&#39;transitionIn&#39; : &#39;elastic&#39;, 
&#39;transitionOut&#39; : &#39;elastic&#39;, 
&#39;cyclic&#39; : true
}); 
}

Jelaskan bahawa selepas muat naik berjaya, foto yang diambil akan melalui di atas Kod js dimasukkan secara dinamik ke dalam elemen #photos, dan pemalam fancybox dipanggil pada masa yang sama. Pada masa ini, klik pada foto yang baru dimuat naik, dan kesan lapisan pop timbul fancybox akan muncul. Ambil perhatian bahawa elemen yang dijana secara dinamik mesti memanggil fancybox melalui fungsi initFancyBox() dalam kod di atas dan tidak boleh dipanggil terus melalui fancybox(), jika tidak, tiada kesan lapisan pop timbul.

Seterusnya, script.js perlu melakukan satu lagi perkara: memuatkan foto terkini secara dinamik dan memaparkannya pada halaman Kami melengkapkan permintaan ajax melalui kaedah .getJSON() jquery.

skrip.js-Bahagian 5

function loadpic(){ 
 $.getJSON("getpic.php",function(json){ 
 if(json){ 
  $.each(json,function(index,array){ //循环json数据 
  var pic = &#39;<a rel="group" href="uploads/&#39;+array[&#39;pic&#39;]+&#39;"> 
  <img  src="/static/imghwm/default1.png"  data-src="uploads/small_&#39;+array[&#39;pic&#39;]+&#39;"  class="lazy"   alt="Melaksanakan fotografi dalam talian dan menyemak imbas foto dalam talian berdasarkan kemahiran jQuery PHP Mysql_javascript" ></a>&#39;; 
  $("#photos").prepend(pic); 
  }); 
 } 
 initFancyBox(); //调用fancybox插件 
 }); 
}

loadpic();

Fungsi loadpic() menghantar permintaan get ke pelayan getpic.php, menghuraikan data json yang dikembalikan, memasukkan maklumat foto secara dinamik di bawah elemen #photos dan memanggil pemalam fancybox Kemudian, jangan lupa muatkan halaman selepas Panggilan loadpic().

PHP

Akhir sekali, latar belakang getpic.php mendapat imej yang dimuat naik dalam pangkalan data dan mengembalikan json ke bahagian hadapan.

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);

Akhir sekali, lampirkan struktur gerai foto data:

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;

Di atas adalah kandungan fotografi dalam talian dan penyemakan imbas foto dalam talian berdasarkan kemahiran jQuery PHP Mysql_javascript Untuk kandungan yang lebih berkaitan, sila Ikuti laman web PHP Cina (www.php.cn)!