[Resolvido] Produzindo thumbnails personalizados

[RSS iMasters 5]

Muitos de nós já tiveram o prazer de construir umaaplicação web que requer a criação de thumbnails a partir de imagens que sãocarregadas em tempo de execução. Thumbnails são dificilmente um assunto complicado,mas eles são incomuns o suficiente para fazer com que cada vez que vocêimplemente um código para sua criação, esta pareça ser uma experiênciacompletamente nova.

 

A maneira mais fácil de produzir thumbnails para umsite é utilizar uma biblioteca pré-configurada, criada para este objetivo.Existem algumas boas bibliotecas com este propósito, incluindo o PHP ThumbnailerClass, que fornece maneiras bem simplesde como manipular imagens. Este tipo de bilbioteca, seja esta utilizada comocódigo ou como um plugin para outro software, vai além do que apenas produzirthumbnails; ela também adiciona marcas d'água e facilmente habilita a rotaçãoprogramática da imagem de saída.

 

Usar o PHP Thumbnailer Class para criar thumbnails éfácil:

include_once('libs/ThumbLib.inc.php');
$imagefile = dirname(__FILE__) . '/sample.jpg';
PhpThumbFactory::create($imagefile)->resize(100,100)->show();

Este código cria um objeto do thumbnail que contém a imagem-fonte, a redimensiona dentro de umaárea de 100x100, e a joga no browser com os cabeçalhos corretos.

 

Existe um outro método bem útil, adaptiveResize(), que iráredimensionar as imagens o máximo possível dentro das dimensões fornecidas,para então cortá-las de maneira que elas preencham todo o tamanho desejado.

 

 

A diferença entre essas duasimagens, fora a área de corte, é o resultado da escolha de qual lado da imagemo algoritmo utilizará para redimensioná-la. No caso do resize(), a imagem-fonte é redimensionada demaneira com que sua altura caiba na área de saída. Já no caso do adaptiveResize(), a imagem-fonte é redimensionadade maneira com que sua largura caiba na área de saída.

 

Para simplificar os próximosexemplos, irei mostrar somente o código que é como o resize(), no qual a imagem de saída é igual oumenor do que as dimensões especificadas, e não precisam ser cortadas. Paracriar o código utilizando o adaptiveResize() você simplesmente precisaredimensionar a imagem pelo lado oposto e utilizar um método de corte noresultado.

 

Independentemente de qual estilode thumbnail sua aplicação necessite, o lado que você irá escolher édeterminado utilizando a comparação largura x altura da imagem.

 

 

Compreendendo o conceito deproporção da imagem

Se você procura por uma funçãoque produza thumbnails para adicionar à sua aplicação, você provavelmente iráencontrar algumas que simplesmente fazem tudo errado. Elas irão calcular otamanho do thumbnail baseando-se somente em uma dimensão da imagem original, ouirão basear o tamanho de saída unicamente na orientação da imagem original.Isso é incorreto, pois irá, na maioria das vezes, deixar algumas imagens dothumbnail cortadas incorretamente.

 

Para determinar qual dimensão daimagem original usar como base para redimensioná-la, você precisa comparar aproporção da imagem original com a proporção do thumbnail.

 

A proporção de uma imagem é arelação entre sua largura e sua altura. O valor real da proporção não é importante,mas a comparação das proporções da imagem original com a imagem do thumbnailgera a dimensão correta que deve ser utilizada para o redimensionamento.

 

Considere as duas imagens abaixo:

 

 

A imagem-fonte do topo tem umaproporção de 2/3. Isto é facilmente convertido para a forma decimal ao dividira largura em pixels pela altura em pixels, (66 ÷ 100) ? 0.66. A imagem-fonte de baixotem uma proporção de 3/2, ou de (100 ÷66) ? 1.5.

 

Para ambas as imagens, o tamanhodo thumbnail de saída é uma atípica faixa vertical. Se você é parecido comigo,na maioria das vezes você acaba escrevendo thumbnails customizados de maneiraatípica. Mesmo assim, a proporção de ½ pode ser computada da mesmamaneira, (50 ÷ 100) = 0.5.

 

A surpresa é que, nos dois casos,a proporção da imagem-fonte é maior do que a proporção do thumbnail, de modoque ambos devem ser redimensionados para que sua largura seja igual à largurado thumbnail, com a altura reduzida em igual proporção:

// Original values obtained from the top image
// can come from getimagesize(), imagesx()/imagesy(), or similar
$source_width = 66;
$source_height = 100;
$thumbnail_width = 50;
$thumbnail_height = 100;



// Compute aspect ratios
$source_ar = $source_width / $source_height;
$thumbnail_ar = $thumbnail_width / $thumbnail_height;



// Compute the output width and height based on the
// comparison of aspect ratios
if ($source_ar > $thumbnail_ar) {
   // Use the thumbnail width
   $output_width = $thumbnail_width;
   $output_height = round($original_height
       / $original_width * $thumbnail_width);
}
else {
   // Use the thumbnail height
   $output_height = $thumbnail_height;
   $output_width = round($original_width
       / $original_height * $thumbnail_height);
}

Se a altura e a largura do thumbnail são diferentes, a comparação entre aproporção da imagem original com a do thumbnail irá nos contar qual lado deveser utilizado como ponto para o redimensionamento.

 

Idealmente, uma biblioteca de thumbnails fará toda a matemática paravocê, mas caso você esteja preso escrevendo seu próprio código, é bom entenderos cálculos envolvidos.

 

Mesmo que você use uma biblioteca, é uma boa ideia considerar o chache.

 

 

Cache do thumbnailpreguiçoso

Bilbliotecas queproduzem thumbnails muitas vezes têm um método básico para criar suas imagens,que gera a imagem de saída diretamente no browser. Isto não é um problema emprimeira instância, mas você não deve permitir que o PHP construa estethumbnail em cada carregamento de página. Isso é um problema se você tem váriosthumbnails em uma página, o que geralmente acontece.

 

Utilizar o cache éuma ótima idéia, mas é melhor se for utilizado de uma maneira que tire totalvantagem das capacidades do seu servidor web. Os códigos seguintes são geradosa partir do uso no Apache, mas podem ser configurados de maneira a funcionarcom Lighttpd ou Nginx.

 

A ideia básica éutilizar um padrão do front controller. Crie thumbnails via PHP para requisiçõesque não têm arquivos correspondentes, e então salve este arquivo no local especificadopara que o Apache o carregue diretamente ? sem carregar o PHP ? em pedidossubsequentes.

 

Se você está usando um Framework PHP, como Lithium ou Zend Framework,então você já colocou tudo no lugar, mas aqui estão algumas linhas básicas.htaccess para permitir mod_rewrite para o padrão dofront controller:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .create_thumbnail.php [PT]

Se você está usando Apache 2.3, você pode utilizar mod_dir e FallbackResource:

FallbackResource create_thumbnail.php

Agora você precisa de um simples script PHP paraassociar a URL requisitada no diretório do Thumbnail com o arquivo que deve sertransformado em thumbnail.

<?php
include_once('libs/ThumbLib.inc.php');

// Set up the directories for the source and thumbnail images
$source_dir = '/var/www/test.vm2/htdocs/images/';
$thumb_dir = '/var/www/test.vm2/htdocs/thumbs/';

// Figure out where to load and save this image
$source_file = $source_dir . basename($_SERVER['REQUEST_URI']);
$output_file = $thumb_dir . basename($_SERVER['REQUEST_URI']);

// Serve the thumbnail and save it
PhpThumbFactory::create($source_file)->adaptiveResize(100,100)
   ->show()
   ->save($output_file);
?>

A coisa mais importante de se prestar atenção égarantir que a saída da imagem vá diretamente para o browser ao salvá-la emdisco, senão o primeiro usuário que tentar carregar o thumbnail não conseguiráver nada.

 

 

Conclusão

Thumbnails são ocorrências comuns e simples degerenciar com alguns truques e uma boa biblioteca. Um bom entendimento de comoa matemática por trás dos códigos da biblioteca funcionam podem ajudar bastantese você precisar produzir algo personalizado.

 

*

 

Texto original de Owen Winkler, disponível em http://phpadvent.org/2010/thumbnails-by-owen-winkler.

 

http://imasters.com.br/artigo/20111/php/produzindo-thumbnails-personalizados