この記事では、php jquery と mysql の組み合わせを使用して、オンライン写真アップロードとオンライン閲覧の Web バージョンを実現します。jQuery+PHP+Mysql に基づいてオンライン写真撮影と写真のオンライン閲覧を実現する方法を説明します。必要な場合は、この記事を参照してください
この記事では、Web バージョンの Ajax インタラクション テクノロジを使用して、オンライン撮影、アップロード、表示ブラウジングの機能を実現するために、PHP および Mysql と組み合わせて jQuery を使用する方法を例を使用して説明します。したがって、この記事の読者は、jQuery とそのプラグインの使用法、および JavaScript 関連の知識に精通しており、PHP と Mysql の関連知識を持っている必要があります。
HTML
まず、アップロードされた最新の写真を表示するためにメイン ページのindex.htmlを作成する必要があります。そのため、これはHTMLページであり、PHPタグはありません。もちろん、写真の撮影やインタラクションのアップロードに必要な HTML 構造を含む 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>
上記の HTML コードを本文に追加しました。#photos は、アップロードされた最新の写真をロードして表示するために使用されます。#camera は、カメラ フラッシュ コンポーネント Web カメラの呼び出しや、ボタンの呼び出しなど、カメラ モジュールのロードに使用されます。写真を撮ってアップロードすること。
さらに、この組み合わせ例のさまざまな操作に必要な jQuery ライブラリ、fancybox プラグイン、フラッシュ カメラ コンポーネント: webcam.js、script.js など、必要な js ファイルをindex.html にロードする必要もあります。
<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}インデックスをプレビューするときはこの方法です。 html ページの下部にカメラ ボタンがありますが、デフォルトでは折りたたまれています。
次にしなければならないことは、jQuery を使用して実装することです。ページのすぐ下にあるカメラ ボタンをクリックしてカメラ コンポーネントを呼び出し、写真の撮影、キャンセル、アップロードに必要なアクションを完了します。
jQuery
これらの対話型アクションに必要なすべての js を script.js ファイルに書き込みます。まず、カメラ コンポーネント webcam.js をロードする必要があります。Web カメラの呼び出しについては、次の記事を参照してください: 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 写真のアップロードが完了すると、最終的にフロントエンド カメラ コンポーネントの Web カメラにデータが返されます。ここで script.js に戻ります。
jQuery
ウェブカメラは、set_hook メソッドを通じてバックグラウンドの PHP 戻り情報をキャプチャします。onComplete はアップロードが完了したことを示し、onError はエラーが発生したことを示します。
script.js-パート 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 プラグインが呼び出されることを説明します。同じ時間です。このとき、アップロードした写真をクリックすると、ファンシーボックスのポップアップレイヤーエフェクトが表示されます。動的に生成された要素は、上記のコードの initFancyBox() 関数を通じて fancybox を呼び出す必要があり、fancybox() を通じて直接呼び出すことはできないことに注意してください。そうしないと、ポップアップ レイヤー効果が発生しません。
次に、script.js はもう 1 つ行う必要があります。最新の写真を動的にロードし、ページに表示するために、jquery の .getJSON() メソッドを使用して、ajax リクエストを完了します。
script.js-パート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);最後に、データのフォトブース構造を添付します:
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;
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
画面をクリックするとjQueryモバイルのヘッダーとフッターが消える問題を解決する方法
JQueryによって実装された自動画像およびテキストカルーセルエフェクトプラグイン
以上がオンライン写真撮影とオンライン写真閲覧を実装するための jQuery+PHP+Mysql コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
