Gerando miniaturas de imagens com PHP
Olá, veremos como gerar miniaturas de imagens (thumb) para uma galeria de fotos, apresentação de produtos ou qualquer outra aplicação. É muito comum encontrarmos sites que exibem miniaturas de imagens ainda da forma antiga, que trata-se de simplesmente redimensionar a imagem com algum software e criar uma pasta chamada thumbs ou miniaturas, muitos aplicativos utilizam essa solução, mas se você pensar em alguma solução mais inteligente que dispense o trabalho do webdesigner por ex. um cms (gerenciador de conteúdo) fica difícil utilizar essa antiga solução, imagine vender ao seu cliente um sistema onde ele possa gerenciar seu conteúdo sem precisar de você, agora imagine que ele queira colocar miniaturas de fotos no site….dai complicou um pouco não é ? ele terá que enviar todas as imagens para você redimensionar e envia-las de volta para ele poder inserir no site, isso não parece ser um sistema com gerenciador de conteúdo, vamos tomar como exemplo um sistema para imobiliárias onde o proprietário cadastra os imóveis e envias as fotos para o site, agora tente imaginar a página principal com os imóveis em destaque……..estranho né, imagine um anúncio com uma foto 800×600 na página principal…agora imagine 20 anúncios como esse, eu acho que fica feio e você? Também não é, então vamos ver como mostrar a miniatura da foto original enviada para o sistema, acredite isso é muito simples!
Em 1º lugar verifique se o seu php está com a biblioteca gd ou gd2 instalada, se não estiver baixe o easyphp, instale e marque a opção gd2 em php extensions, alias o easyphp é maravilhoso, ele já instala o apache, php5 e mysql, se você não conhece está perdendo tempo, falarei sobre ele em um outro post.
Vamos ao arquivo index.php
<html>
<head>
<title>.: Thumbs :.</title>
</style>
</head>
<body>
<img src=”thumb.php?img=image1.jpg” title=”imóvel cod 01″>
<img src=”thumb.php?img=image2.jpg” title=”imóvel cod 02″>
</body>
</html>
Note que acima no src estamos passando a url da imagem para para o arquivo thumb.php, ao invés de passar diretamente a imagem, isso porque o arquivo thumb.php está encarregado de redimensionar a imagem original, mas esse redimensionamento ocorre somente na visualização, ele não altera propriamente a imagem, ela continua no seu tamanho original, apenas o que é mostrado é que foi redimensionado, isso tem que ficar claro, nenhuma imagem pequena é gerada, esse é o truque, o arquivo thumb.php apenas muda as propriedades da imagem para a visualização ok ?
Claro que nesse exemplo eu utilizei uma url pré-definida, mas para o caso de um sistema essa url deveria ser retornada por ex. de uma consulta SQL, no sisteminha (veja aqui o sisteminha) que fiz a algum tempo atrás eu criei uma tabela mais ou menos assim: codimovel_f , urlFoto, descFoto … onde no momento do upload da foto era feita uma inserção no banco de dados contendo a url da foto que acabara de ser enviada, para não repetir os nomes das imagens e eu não ter que ficar renomeando eu utilizei a função MD5() do PHP que gera um nome/string único, em um artigo posterior falarei sobre o MD5.
Vamos ver o tal arquivo chamado thumb.php
<?php
#recebendo a url da imagem
$filename = $_GET['img'];
#Cabeçalho que ira definir a saida da pagina
header(‘Content-type: image/jpeg’);
#pegando as dimensoes reais da imagem, largura e altura
list($width, $height) = getimagesize($filename);
#setando a largura da miniatura
$new_width = 120;
#setando a altura da miniatura
$new_height = 100;
#gerando a a miniatura da imagem
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
#o 3º argumento é a qualidade da miniatura de 0 a 100
imagejpeg($image_p, null, 50);
imagedestroy($image_p);
?>
Obs: Para salvar a imagem/thumb em um diretório altere a linha
imagejpeg($image_p, null, 50);
para
imagejpeg($image_p, ‘/diretorio/nomeImagem.jpg/’, 50);
Onde /diretorio/nomeImagem.jpg é o caminho e nome onde deseja armazenar a miniatura.
Muito simples não ? Agora você pode usar o CSS para dar uma geral nesse exemplo, ou pode fazer a coisa ficar mais bonita, você pode usar o lightbox, clique e veja o que você poderá fazer com LightBox! até a próxima.
Download do pacote: thumbs.rar
Aposto que quer ver funcionando! então está ai o Thumbs funcionando
Rafael Clares
48 Comentários até o momento
Deixe um comentário
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Olha otimo sistema de thumbs mais naum funcionou no meu servidor tenho php 5 sera q é isso ele tah erro interno 500 no iss”!!! o q sera q pode ser??? sera q pode me ajudar???
Comentário por David Fevereiro 20, 2008 @ 3:59 pmOpa ja consegui resolver para funcionar no php5 tem q alterar as seguintes linha
// recebendo a url da imagem
$filename = $_GET['img'];
// Cabeçalho que ira definir a saida da pagina
Comentário por David Fevereiro 20, 2008 @ 4:14 pmheader(‘Content-type: image/jpeg’);
Entendi, o problema é que você copiou e colou o código e ele ao invés de estar com aspas/apostofros estava com o ascento agudo/crase. mas tá ai, quem for copiar e colar altere os sinais agudo/crase para aspas/apostofros.
Comentário por clares Fevereiro 20, 2008 @ 4:26 pmOla, boa noite.
Comentário por Carlos J. Souza Abril 6, 2008 @ 11:55 pmParabens pelos artigos acessiveis que voce tem publicado. Para foi bem util e numa linguagem simples, possibilitando melhorarmos futuras implementacoes.
Abraco.
Carlos, obrigado pelo feedback.
Comentário por clares Abril 7, 2008 @ 12:12 amMuito bom, usei e funcionou corretamente e sem complicação!!! Parabéns!
Comentário por Victor Abril 14, 2008 @ 6:45 pmera o que eu precisava, valeu, parabéns!
Comentário por Mauricio Biasotto Abril 18, 2008 @ 4:12 pmNão consegui, no Firefox só aparecem quadradinhos.
Comentário por João Luiz Abril 25, 2008 @ 12:22 pmCaro João, não só testei como o fiz visualizando no firefox, acredito que você tenha copiado o código e não alterou as aspas/apostrofos, leia os demais comentários ok. Obrigado pelo comentário.
Comentário por clares Abril 25, 2008 @ 12:39 pmAmigo, grato pela presteza, desculpe.
Segundo eu entendi as linhas devem ficar assim:
// recebendo a url da imagem
$filename = $_GET['img'];
// Cabeçalho que ira definir a saida da pagina
header(“Content-type: image/jpeg”);
Assim eu fiz. E ainda não funcionou.
Estou enviando para a página assim:
echo ”;
Será que o erro esta ai?
Comentário por João Luiz Abril 25, 2008 @ 12:58 pmJoão você tem instalada a biblioteca GD/GD2 no PHP? Se não tiver aconselho a você instalar o EasyPHP que já tem o PHP5 e as extensões necessárias, bastando apenas ativar através do próprio gerenciador do EasyPHP, por default o GD/GD2 está desabilitada. Talvez seja isso, ao clicar no link do exemplo funciona ai ? Abraços
Comentário por clares Abril 25, 2008 @ 1:15 pmA biblioteca esta instalada e funcionado. Sim o exemplo funciona.
Comentário por João Luiz Abril 25, 2008 @ 1:42 pmNa minha pagina original as imagens aparecem grandes.
O que fiz foi substituir na linha:
echo ‘<img src=”‘;
// echo $files.$entrada_arq.’”;
O $files… por thumb.php?img
João, me desculpe mas acho que você deveria ler novamente o post. Não tem como errar! De toda forma
Comentário por clares Abril 25, 2008 @ 2:05 pmirei disponibilizar o arquivo para download em http://clareslab.com.br/learn/thumbs.rar será mais fácil por que à medida que você vai alterando algo que já está funcionando eu já não tenho mais como ajuda-lo, infelizmente. Já está escrito no post como funciona, mas irei repetir…o arquivo thumbs.php retorna uma única imagem sendo preciso para isso passar a url da imagem! Abraços
Vai me ajudar no projeto final da escola :D
Comentário por daniel Junho 12, 2008 @ 6:06 pmAmigo não conseguir fazer funcionar,ao aparece uns quadradinhos….
Comentário por Osvaldo de SouzaTavares Junho 17, 2008 @ 7:37 pmcomo que o links das imagens tivesse errada;;;
Olá Osvaldo, é importante lembrar que o código acima está informando que os arquivos php e as imagens estão no mesmo diretório. Quero dizer, se suas imagens estão por ex: em um diretório separado (que seria o correto) então você deverá passar a urlDiretorio+nomeDaImagem. Por ex:
src=”thumb.php?img=diretorio/image1.jpg” , faça o download do arquivo e dê uma analisada.
Um grande abraço.
Obs: Pessoal atentem-se aos apóstofros/aspas … verifiquem se estão corretos.
Comentário por clares Junho 17, 2008 @ 7:55 pmClares, esse sistema aceita gif e png também?
Comentário por Junior Campos Julho 12, 2008 @ 2:45 pmOlá Junior, O exemplo proposto não aceita e você pode ver isso na linha $image = imagecreatefromjpeg($filename), onde o comando está criando um jpeg.. Você pode ver como adaptar o exemplo em:
http://br.php.net/manual/pt_BR/function.imagecreatefrompng.php
http://br.php.net/manual/pt_BR/function.imagecreatefromgif.php
abraços
Comentário por clares Julho 12, 2008 @ 3:11 pmOlá, bons códigos, muito úteis!
Tenho uma dúvida, este comando gera uma miniatura da foto (thumbs), mas esta é um arquivo temporário?? ocupará espaço em meu servidor?? onde será salvo??
Obrigado, parabéns pelo código!
Comentário por Tiago Setembro 10, 2008 @ 10:36 amOla Tiago, não ocupa espaço em disco, o que acontece é que não são criadas imagens pequenas mas isso já comentei no post. a imagem é apenas redimensionada em tempo de execução, tem seu tamanho e qualidade reduzidos ao ser “exibida”. Portanto não se preocupe pois elas não ficam em temp ou algo assim. Abraços
Comentário por Rafael Clares Setembro 10, 2008 @ 12:09 pmOla Rafael Clares, a muito tempo estava procurando um tutorial desses. Ficou muito bom. mais uma coisa q me deixou encucado, como faço pra ele redimencionar só o width e heigth fazer automaticamente???
obrigado
Comentário por Ewerton Cavaliere Muller Setembro 19, 2008 @ 5:42 pmOlá Ewerton, amigo deixa eu ver se entendi a pergunta. Você quer mudar apenas a largura e manter a altura? Se for isso a altura original tem seu valor contido na variável $height. $new_height é a nova que determinamos. Obrigado pelo comentário. Abraços
Comentário por Rafael Clares Setembro 22, 2008 @ 12:21 pmOlá …
Eu estou procurando por um exemplo desses usando PHP5 Orientado a Objeto, você programa em OO também?
Estou precisando aprender como separar as coisas, tenho que fazer um site com apenas uma foto miniatura na pagina inicial, como se eu pudesse definir a foto CAPA, e quando eu clicasse nessa foto abrisse a pagina com todas as fotos, pode até ser usando javascript ou ajax, para não precisar abrir outra pagina, apenas uma janelinha, mas isso deve ser mais complicado.
Sou iniciante PHP, li 2 livros ja, e estou aprendendo OO agora, e procurando ver exemplos como fazer as coisas.
Gostaria muito que me desse uma ajudinha se puder..
Abração! E parabéns pelo tutorial.
Comentário por Thiago Setembro 23, 2008 @ 10:44 pmLegal Thiago, entendo o que você quer fazer, dê uma olhada nesse sisteminha que fiz.
Comentário por Rafael Clares Setembro 24, 2008 @ 1:38 amhttp://clareslab.com.br/webimoveis/
olhe o painel administrativo em
http://clareslab.com.br/webimoveis/admin
Esse sistema está desatualizado neste endereço.
A nova última versão que contém algumas melhorias você pode ver em http://74.86.147.228/~webdemo/
mas nesse você não terá acesso ao painel admin, porém poderá ver algumas diferenças… de toda forma, entendo um pouco o que você quer… teste esse exemplo de forma que você entenda bem e depois nos falamos denovo para ver uma próxima etapa para você construir seu sistema ok. Abraços e muito obrigado pelo feedback.
Cara!!! Muito obrigado mesmo! Fazia tempo que estava procurando algo pratico e objetivo assim para criar thumbs… O conteúdo do seu blog é muito bom, espero que continue assim. Vlw!
Comentário por Jackson Outubro 2, 2008 @ 12:31 pmClares, essa matéria é ótima, a melhor sobre o assunto que encontrei, particularmente falando.
Obrigado por isso e abraços
Comentário por Eliseu sb Dezembro 2, 2008 @ 2:45 pmMto bom esse tutu veio, nao estava funcionando, entao baxei a que vc postou ali e funcionou, e quem quizer que ao clicar na imagem abra o arquivo original e numa nova aba coloque antes de <img src=
<a href=”caminho para a imagem original” target=_blank>
Comentário por Xupisco Dezembro 9, 2008 @ 12:19 amRafael, queria lhe dar os parabéns pelo excelente trabalho que você vem fazendo no seu blog, com excelentes post de facil entendimento e com contúdo super atrativos, obrigado mesmo, já está nos favoritos
Comentário por Raphael Azeredo Dezembro 21, 2008 @ 12:08 pmValeu Rapha,
Comentário por Rafael Clares Dezembro 22, 2008 @ 11:37 amabraços
Boa tarde Rafael, interessante seu “sisteminha” muito legal, podemos conversar sobre ele? por favor entre com contato com meu email.
Comentário por Paulo Dezembro 31, 2008 @ 4:41 pmFeliz Ano Novo a todos !!!!!!!
Obs. Não tenho corretora nem imobiliária.
Vlw cara gostei muito do codigo, estava precisando disso faz tempo.caso eu queira salvar a imagem thumb numa pasta como que faço….vlw
Comentário por Rodrigo Martins Janeiro 6, 2009 @ 12:13 amOlá Rodrigo, para salvar a imagem altere a penultima linha do arquivo PHP
Comentário por Rafael Clares Janeiro 6, 2009 @ 10:37 amimagejpeg($image_p, null, 50);
troque o null pelo o caminho onde quer salvar a imagem ex:
imagejpeg($image_p, ‘/home/userx/images/img.jpg’, 50);
Parabéns pelo post, o blog está excelente e isso ajudará a diminuir a taxa transferência do meu site, exibo miniaturas de programas e estará me ajudando muito este código, já que não encontrei informações sobre gd ou gd2.
Comentário por Luiz Felipe Janeiro 20, 2009 @ 10:02 pmJá testei offline e funcionou nos conformes. Agora vou integrar ao meu site e depois dar upload.
Obrigado! ;)
Olá, como eu comentei, o código funciona perfeitamente no que é proposto, mas eu notei que ao invés de diminuir meu bandwith, aumentou, isso ocorre porque toda vez ele visualiza a imagem, ela é baixada novamente. Não teria como o navegador imprimir a imagem uma vez e depois disso, toda vez que ele imprimir a imagem de novo, usar a do cachê, como seu eu usasse um link de imagem normal?
Mesmo eu tendo uma boa experiência com PHP, eu nunca mexi com imagens e não consegui fazer o que eu descrevo acima. =/
Ei, falando a respeito do EasyPHP, eu já tive alguns problemas com ele, atualmente eu uso o Vertrigo, julgo melhor e o utilizo.
Li o comentário que você fez sobre meu site, muito obrigado!
Comentário por Luiz Felipe Janeiro 21, 2009 @ 1:40 pmTestei apenas o desempenho em relação ao tempo de exibição das imagens, não posso afirmar que o que você descreve realmente ocorre por eu não ter testado, nem sei se o farei. Agora se quiser algo mais completo utilize a class thumbnail que possui uma gama maior de config. e também de efeitos como reflexo, watermark, etc… Quanto ao EasyPHP, nunca tive problema algum e continua sendo uma indicação, instalei uma vez e pronto… apenas o utilizo. Obrigado pelo comentário,
Comentário por Rafael Clares Janeiro 21, 2009 @ 1:54 pmVlw pelo script ajudo muito no meu sistema t+
Comentário por Parrudinho Janeiro 29, 2009 @ 1:44 pmabraço
Não funciona comigo, não deve ser problema de código, mas alguém já viu este erro?
Comentário por Moisés Fevereiro 17, 2009 @ 1:59 pm“Warning: getimagesize(foto.JPG) [function.getimagesize]: failed to open stream: No such file or directory in C:\www\site\sistema\carregafoto.php on line 26
O erro inicial, era que estava separando o nome do arquivo assim o código não sabia de onde estava vindo a imagem.
Solucionado esse erro, veio outro: imagecopyresampled(): supplied argument
Na verdade a foto sairá do pc do usuário e será salva na pasta thumb no servidor.
Inicialmente deverá gerar 2 imagens: 800 X 600 e 120 X 100 e salva-las com nomes destintos e depois serem salvos seus nomes no banco de dados.
Mas para o momento, preciso entender como funciona para carregar ao menos uma simples imagem redimensionada.
Anotei no código onde retorna o erro.
Grato;
$arquivi_nome = $_POST["max_foto"];
$filename = $arquivo_nome;
$percent = 0.10;
header(“Content-type: image/jpeg”);
list($width, $height) = getimagesize($filename);
$new_width = 120;
$new_height = 100;
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
//nesta linha da o seguinte erro:Warning imagecopyresampled(): supplied argument is not a valid Image resource
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
$pasta_dir = “thumb/”;//diretorio dos arquivos
$arquivo_nome = $pasta_dir . $arquivo["name"];
//arquivo_nome não está entrando
Comentário por Moisés Fevereiro 17, 2009 @ 7:25 pmimagejpeg($image_p, $arquivo_nome , 50);
imagedestroy($image_p);
Moisés,
$arquivi_nome = $_POST['max_foto'] – onde está sendo usado ?
Comentário por Rafael Clares Fevereiro 18, 2009 @ 3:47 pmpq logo na linha abaixo vc diz $filename = $arquivo_nome;
acredito que $arquivi_nome e $arquivo_nome são difrentes, mas é isso mesmo?
Rafael, show de bole este script.
Mas no meu para salvar a mini/thumb, não foi nem por reza….rs
Coloco como vc descreve e nada, deu permissão a pasta tb nada.
imagejpeg($image_p, ‘mini/teste.jpg/’, 50);
Abraços.
Adaysso
Comentário por Adilson Julho 13, 2009 @ 8:49 pmPow Adilson, algo deve estar errado mesmo, acabei de testar aqui e gera normalmente a figura.
Pegando o mesmo script do exemplo alterei a linha para
imagejpeg($image_p, “thumbs/$filename”, 50);
Onde thumbs/ é o diretorio onde salvo a miniatura …. e $filename é nome original da imagem.
Obs: Se vai salvar a miniatura não esqueça que tem que alterar o local de onde serão exibidas as imagens depois.
De uma olhada aí em relação à diretório e também a forma como está passando o nome da imagem …
abs
Comentário por Rafael Clares Julho 13, 2009 @ 9:47 pmSó gerou uma única vez, sem a extenção da imagem ‘mini’.
Mas resolvi e funcionou para o que preciso, pois minhas imagens são gravadas no bd e é exibida apenas a primeira ex: thumb.php?img=fotos_anuncios/
Irei ver o que isso poderá ocasionar com o uso da banda, já que é gerado temporaria as thumbs para cada usuários no site, e se gerasse uma está principal, ficaria bem melhor.
Conseguir um script que faz isso, irei tentar adaptá-lo.
Valeu um forte abç.
Adaysso
Comentário por Adilson Julho 14, 2009 @ 12:48 pmSó não está funcionando no Chrome!
Comentário por Moisés Agosto 23, 2009 @ 2:29 pmObs: img- vem do formulário(input type=file)
Olá, Muito obrigado pela ajuda… estava precisando deste sisteminha… agora sem querer abusar, como faço para que as miniaturas reduzam proporcionalmente?
Comentário por Fernando Souza Outubro 16, 2009 @ 5:45 pmFernando, basta alterar as linhas abaixo:
$new_width = 120;
$new_height = 100;
alterando o valor fixo em pixels por valor percentual, ex:
$new_width = ($width / 5);
$new_height = ($height / 5);
Onde $new_width é a nova largura resultante da largura original ($width) dividido por 5 neste caso, como percebeu
o valor da nova largura não está fixo (120) e sim baseado na divisão do valor original dividido por 5 ($width/5)
Quero dizer que você pode explorar estas duas linhas para chegar ao resultado que deseja.
abraços,
Comentário por Rafael Clares Outubro 17, 2009 @ 1:50 amcaro amigos estou com um problema no meu arquivo thumb.php ou sei la pois estou iniciando nessa de PHP exemplos – http://www.veiculossaopaulo.com.br/thumb.php?70prop2=70&arq=1069407089_CPA-5900_01.jpg
assim ele so me da a msg que a imagem nao foi encontrada …
e se eu mudar (por o nome da pasta uploads)
http://www.veiculossaopaulo.com.br/uploads/1069407089_CPA-5900_01.jpg ai abre a imagem do carro
aqui esta o thumb.php
<img src="”>
POR FAVOR ME AJUDEM POIS COMPREI ESSE SCRIPT DE UM SITE AI http://www.classicarro.noxweb.com.br/
Comentário por adriano Novembro 5, 2009 @ 4:14 pmE O CARA NUM TA NEM AI PRA MIM
OBRIGADO DESDE JA
Adriano, por favor leia os comentários, a solução para o problema certamente já existe neles, sabe a versão de seu PHP?
Comentário por Rafael Clares Novembro 13, 2009 @ 2:33 amaté mais
obrigado pelo comentário
descupa foi errado é http://www.veiculossaopaulo.com.br/thumb.rar
Comentário por adriano Novembro 5, 2009 @ 4:18 pm