A utilização de albums online pode ter várias finalidades, e um que conte com a funcionalidade de tirar fotos no próprio album torna-o ainda mais útil e versátil. Os colegas da TutorialZine criaram um tutorial que o irá ajudar a criar isso mesmo, um estiloso album de fotografias online com a funcionalidade embutida para tirar fotos. Este tutorial conta com linguagem HTML, CSS3, Flash, jQuery e PHP, que em conjunto com a utilização de algumas técnicas e métodos aliados a um plugin Javascript que trabalha a API do Flash (para permitir ter acesso à câmera web ou câmera digital ligada a um computador), tornam possível ter o seu próprio album de fotografias online. Isto pode ser utilizado para criar albums de fotos de um evento, em que as fotos ficam de imediato disponíveis online, fotos de um jantar de turma, de um jantar de família, de um convívio entre amigos ou outra ocasião que você ache oportuno criar um registo fotográfico. Esta é uma maneira divertida e rápida de você ter um registo de uma ocasião ou evento, rapidamente e sem custos adicionais!

1. CRIANDO O HTML

O primeiro passo para criar o nosso simples aplicativo web é criar a estrutura da página, o layout, e isso irá ser feito utilizando HTML, utilizando jQuery desde já para ir buscar imagens existentes à pasta pré definida para isso. Neste passo ainda não será introduzido nem PHP nem HTML nem CSS3. Assim, crie um documento HTML e insira o seguinte código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Como criar um album de fotos online com captura de imagem</title>

<link rel="stylesheet" type="text/css" href="files/css/styles.css" />
<link rel="stylesheet" type="text/css" href="files/fancybox/jquery.fancybox-1.3.4.css" />

</head>
<body>

<div id="topBar">
    <h1>Aplicativo online para captura de imagens!</h1>
    <h2><a href="http://www.escolacriatividade.com/"> Escola Criatividade &raquo;</a></h2>
</div>

<div id="photos"></div>

<div id="camera">
	<span class="tooltip"></span>
	<span class="camTop"></span>

    <div id="screen"></div>
    <div id="buttons">
    	<div class="buttonPane">
        	<a id="shootButton" href="" class="blueButton">Capturar!</a>
        </div>
        <div class="buttonPane hidden">
        	<a id="cancelButton" href="" class="blueButton">Cancelar</a> <a id="uploadButton" href="" class="greenButton">Enviar!</a>
        </div>
    </div>

    <span class="settings"></span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="files/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="files/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="files/webcam/webcam.js"></script>
<script src="files/js/script.js"></script>

</body>
</html>

Além dos elementos de layout, no final do documento estão as ligações aos ficheiros javascript que irão fazer a busca pelas imagens e apresentá-las, a ligação à câmera do computador.

2. CRIANDO O PHP

O layout já está em andamento mas isso não quer dizer que não seja necessária a utilização de PHP para fazer com que o nosso album funcione. A utilização de PHP neste processo prende-se com o facto de que é necessário fazer a ligação e recepção da imagem enviada a partir do Flash, e para fazer a listagem dos ficheiros enviados, em parceria com o script jQuery. Assim, crie o ficheiro upload.php e insira o seguinte código:

<?php

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit;
}

$folder = 'uploads/';
$filename = md5($_SERVER['REMOTE_ADDR'].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"	: "Erro ao guardar a imagem. Certifique-se que as permissões das pastas estão definidas para 777."
	}';
	exit;
}

$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){
	unlink($original);
	exit;
}

rename($original,'uploads/original/'.$filename);
$original = 'uploads/original/'.$filename;

$origImage	= imagecreatefromjpeg($original);
$newImage	= imagecreatetruecolor(154,110);
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370); 

imagejpeg($newImage,'uploads/thumbs/'.$filename);

echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';
?>

Não é possível fazer a comunicação com as câmeras web ou outras ligadas a um computador através de Javascript, e é por isso mesmo que é necessária a utilização de Flash que conta com excelentes funcionalidades de ligação às câmeras de um computador, fazendo assim de intermediário entre o computador e o nosso aplicativo web. As imagens irão sser guardadas como ficheiros JPEG e irão ser criados automaticamente as miniaturas para serem introduzidas na grelha do album.

O próximo passo é criar o ficheiro que irá procurar dentro da pasta das imagens as imagens presentes, guardar as suas informações num array como um objeto JSON . Esta listagem é depois ordenada de acordo com a data de envio e irão ser apresentadas apenas 24 imagens de cada vez. Crie um ficheiro com o nome browse.php e insira o seguinte código:

<?php

header('Content-type: application/json');

$perPage = 24;

$g = glob('uploads/thumbs/*.jpg');

if(!$g){
	$g = array();
}

$names = array();
$modified = array();

for($i=0,$z=count($g);$i<$z;$i++){
	$path = explode('/',$g[$i]);
	$names[$i] = array_pop($path);

	$modified[$i] = filemtime($g[$i]);
}

array_multisort($modified,SORT_DESC,$names);

$start = 0;

if(isset($_GET['start']) && strlen($_GET['start'])>1){
	$start = array_search($_GET['start'],$names);

	if($start === false){

		$start = 0;
	}
}

$nextStart = '';

if($names[$start+$perPage]){
	$nextStart = $names[$start+$perPage];
}

$names = array_slice($names,$start,$perPage);

echo json_encode(array(
	'files' => $names,
	'nextStart'	=> $nextStart
));

?>

3. CRIANDO O JQUERY

A utilização do ficheiro webcam.js para fazer a ligação entre a câmera do computador e o nosso aplicativo é um ponto muito importante neste processo. Este plugin permite-nos capturar as imagens e enviá-las. Assim é necessário criar um ficheiro .js para fazer parte do trabalho e colocar o webcam.js em jogo. Crie um ficheiro script.js (insira-o dentro da pasta files/js/ ) e insira o seguinte código:

$(document).ready(function(){

	var camera = $('#camera'),
		photos = $('#photos'),
		screen =  $('#screen');

	var template = '<a href="uploads/original/{src}" rel="cam" '
		+'style="background-image:url(uploads/thumbs/{src})"></a>';

	/*----------------------------------
		Setting up the web camera
	----------------------------------*/

	webcam.set_swf_url('files/webcam/webcam.swf');
	webcam.set_api_url('upload.php');	// The upload script
	webcam.set_quality(80);				// JPEG Photo Quality
	webcam.set_shutter_sound(true, 'files/webcam/shutter.mp3');

	// Generating the embed code and adding it to the page:
	screen.html(
		webcam.get_html(screen.width(), screen.height())
	);

	/*----------------------------------
		Binding event listeners
	----------------------------------*/

	var shootEnabled = false;

	$('#shootButton').click(function(){

		if(!shootEnabled){
			return false;
		}

		webcam.freeze();
		togglePane();
		return false;
	});

	$('#cancelButton').click(function(){
		webcam.reset();
		togglePane();
		return false;
	});

	$('#uploadButton').click(function(){
		webcam.upload();
		webcam.reset();
		togglePane();
		return false;
	});

	camera.find('.settings').click(function(){
		if(!shootEnabled){
			return false;
		}

		webcam.configure('camera');
	});

	// Showing and hiding the camera panel:

	var shown = false;
	$('.camTop').click(function(){

		$('.tooltip').fadeOut('fast');

		if(shown){
			camera.animate({
				bottom:-466
			});
		}
		else {
			camera.animate({
				bottom:-5
			},{easing:'easeOutExpo',duration:'slow'});
		}

		shown = !shown;
	});

	$('.tooltip').mouseenter(function(){
		$(this).fadeOut('fast');
	});

	/*----------------------
		Callbacks
	----------------------*/

	webcam.set_hook('onLoad',function(){
		// When the flash loads, enable
		// the Shoot and settings buttons:
		shootEnabled = true;
	});

	webcam.set_hook('onComplete', function(msg){

		// This response is returned by upload.php
		// and it holds the name of the image in a
		// JSON object format:

		msg = $.parseJSON(msg);

		if(msg.error){
			alert(msg.message);
		}
		else {
			// Adding it to the page;
			photos.prepend(templateReplace(template,{src:msg.filename}));
			initFancyBox();
		}
	});

	webcam.set_hook('onError',function(e){
		screen.html(e);
	});

	/*-------------------------------------
		Populating the page with images
	-------------------------------------*/

	var start = '';

	function loadPics(){

		// This is true when loadPics is called
		// as an event handler for the LoadMore button:

		if(this != window){
			if($(this).html() == 'Loading..'){
				// Preventing more than one click
				return false;
			}
			$(this).html('Loading..');
		}

		// Issuing an AJAX request. The start parameter
		// is either empty or holds the name of the first
		// image to be displayed. Useful for pagination:

		$.getJSON('browse.php',{'start':start},function(r){

			photos.find('a').show();
			var loadMore = $('#loadMore').detach();

			if(!loadMore.length){
				loadMore = $('<span>',{
					id			: 'loadMore',
					html		: 'Load More',
					click		: loadPics
				});
			}

			$.each(r.files,function(i,filename){
				photos.append(templateReplace(template,{src:filename}));
			});

			// If there is a next page with images:
			if(r.nextStart){

				// r.nextStart holds the name of the image
				// that comes after the last one shown currently.

				start = r.nextStart;
				photos.find('a:last').hide();
				photos.append(loadMore.html('Load More'));
			}

			// We have to re-initialize fancybox every
			// time we add new photos to the page:

			initFancyBox();
		});

		return false;
	}

	// Automatically calling loadPics to
	// populate the page onload:

	loadPics();

	/*----------------------
		Helper functions
	------------------------*/

	// This function initializes the
	// fancybox lightbox script.

	function initFancyBox(filename){
		photos.find('a:visible').fancybox({
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'overlayColor'	: '#111'
		});
	}

	// This function toggles the two
	// .buttonPane divs into visibility:

	function togglePane(){
		var visible = $('#camera .buttonPane:visible:first');
		var hidden = $('#camera .buttonPane:hidden:first');

		visible.fadeOut('fast',function(){
			hidden.show();
		});
	}

	// Helper function for replacing "{KEYWORD}" with
	// the respectful values of an object:

	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}
});

4. CRIANDO O CSS

Chegou a altura de estilizar o nosso aplicativo web e torná-lo agradável e vistoso para os visitantes. Serão introduzidos alguns efeitos subtis mas que irão fazer toda a diferença no look do aplicativo, fazendo com que os seus visitantes gostem do que vêm e que atribuam valor ao mesmo. Assim, crie o ficheiro styles.css, guarde-o dentro da pasta files/css/ e insira o seguinte código:

*{
	margin:0;
	padding:0;
}

html{
	background:url('../img/bg.jpg') center top repeat-y #202020;

}

body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
	color:#888;
}

h1,h2{
	color: #fff;
	line-height: 1;
	background-color: #222222;
	font-family: 'Segoe UI Light','Segoe UI',Arial,sans-serif;
	font-weight: normal;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	margin-left: -446px;
}

h1{
	font-size: 33px;
	padding: 5px 15px 10px;
	top: 34px;
}

h2{
	font-size: 14px;
	padding: 4px 13px 9px 11px;
	top: 82px;
}

#topBar{
	background:url('../img/top_bar_bg.jpg') repeat-x;
	height:163px;
}

#photos{
	margin: 60px auto 100px;
	overflow: hidden;
	width: 880px;
}

#photos:hover a{
	opacity:0.5;
}

#photos a,
#loadMore{
	background-position: center center;
	background-color: rgba(14, 14, 14, 0.3);
	float: left;
	height: 110px;
	margin: 1px 1px 0 0;
	overflow: hidden;
	width: 145px;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#photos a:hover{
	opacity:1;
}

#loadMore{
	cursor: pointer;
	line-height: 110px;
	text-align: center;
	text-transform: uppercase;
	font-size:10px;
}

#loadMore:hover{
	color:#fff;
	text-shadow:0 0 4px #fff;
}

#camera{
	background:url('../img/cam_bg.jpg') repeat-y;
	border:1px solid #f0f0f0;
	height:525px;
	width:598px;
	position:fixed;
	bottom: -466px;
	left:50%;
	margin-left:-300px;

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

.camTop{
	background:url('../img/cam.png') no-repeat center center;
	width:100%;
	height:66px;
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
}

.settings{
	background:url('../img/settings.png') no-repeat;
	cursor: pointer;
	height: 28px;
	position: absolute;
	right: 37px;
	top: 448px;
	width: 30px;
}

.settings:hover{
	background-position:left bottom;
}

#screen{
	width:520px;
	height:370px;
	margin: 66px auto 22px;
	background:#ccc;

	line-height: 360px;
    text-align: center;
	color:#666;
}

.buttonPane{
	text-align: center;
}

.tooltip{
	background:url('../img/tooltip.png') no-repeat;
	position:absolute;
	width:177px;
	height:146px;
	right: 38px;
	top: -140px;
}

.blueButton,
.greenButton{
	background:url('../img/buttons.png') no-repeat;
	text-shadow:1px 1px 1px #277c9b;
	color:#fff !important;
	width:99px;
	height:38px;
	border:none;
	text-decoration:none;
	display:inline-block;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	margin: 0 4px;
}

.greenButton{
	background:url('../img/buttons.png') no-repeat right top;
	text-shadow:1px 1px 1px #498917;
}

.blueButton:hover,
.greenButton:hover{
	background-position:left bottom;
	text-decoration:none !important;
}

.greenButton:hover{
	background-position:right bottom;
}

.blueButton:active,
.greenButton:active{
	position:relative;
	bottom:-1px;
}

.hidden{
	display:none;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}

5. RESULTADO FINAL

Como criar um album de fotos online com captura de imagem

Como criar um album de fotos online com captura de imagem

6. BAIXE OS FICHEIROS FONTE

Caso seja do seu interesse, poderá baixar os ficheiros fonte aqui e ter na sua posse todos os ficheiros necessários para colocar este aplicativo online e experimentá-lo e alterá-lo ao seu gosto. Recomendamos vivamente que experiencie alterar os ficheiros, a nível do layout e da estilização de modo a que você continue a ganhar experiência na utilização destas linguagens!

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Leonardo Aquino
    10 de junho de 2012

    Uma ferramenta que descobri recentemente é o álbum dos sonhos.. é uma boa opção http://www.albumdossonhos.com.br



  2. Cesar Chagas
    1 de setembro de 2012

    Diogo, coloquei este aplicativo on-line, não alterei nada, mas não está fazendo o upload das fotos, eu gostaria que além do upload, fazer também o download da foto ou que gravasse direto em uma pasta no disco local… é possível?



  3. Asafe
    20 de setembro de 2012

    Muito bom o tutorial.
    Eu precisava que o usuario tirasse somente 4 fotos e depois criar um thumb dessas 4 fotos com a logo da empresa e poder compartilhar no facebook, twitter o link junto com a imagem, como faz ?



  4. Sandro
    1 de março de 2013

    Meu jovem, esse site foi tudo bom em minha vida…muito Obrigado…que Deus prospere cada vez mais…

    valeu…
    Obrigado…



  5. Joel de Oliveira Lima
    23 de maio de 2013

    não conseguir capturar a imagem. como que acontece ? ficou pronto. visualizei minha webcam. mais não capturei a imagem



  6. Stacia
    14 de outubro de 2013

    Interesting blog! Is your theme custom made or did
    you download it from somewhere? A design like yours with a few simple tweeks would really make my blog
    stand out. Please let me know where you got your theme.

    Kudos



  7. Alguém consegiu no IE
    8 de janeiro de 2014

    Pessoas,
    Alguém conseguiu no IE, no meu a imagem da cam não aparece.



  8. Igor Polese
    28 de abril de 2014

    fiz assim como descrito no tutorial … porém não consegui fazer o upload das imagens após captura.



  9. IgorPolese
    28 de abril de 2014

    fiz assim como descrito no tutorial … porém não consegui fazer o upload das imagens após captura.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz