Usando o WideImage no CakePHP Artigo

Fala pessoal, dois meses e dezoito dias depois do meu último artigo sobre CakePHP (sobre roteamento com banco de dados) cá estou eu novamente, firme e forte.

Um tempo atras falei sobre upload de arquivos aqui no blog, hoje vou mostrar como usar a pasta Vendor para carregar o WideImage no CakePHP e assim conseguir recursos poderosos e simples para tratar imagens.

Usando o WideImage

Para quem não conhece, o WideImage usa a extenão GD2 para manipular imagens trocando a cor, redimensionando, cortando, escrevendo texto sobre a imagem, colocando imagem sobre imagem (marca d'água, por exemplo), aqui alguns exemplos: http://wideimage.sourceforge.net/demos/.

No PHP é fácil de se conseguir um resultado legal, para usar a classe basta incluir no script e chamar a imagem:

include 'WideImage/WideImage.php';
$img = WideImage::load('big.png');

A partir dai é usar a criatividade e os comandos da biblioteca pra conseguir o que você quer, veja.

Redimensionando e cortando imagens

Vamos a um exemplo prático do uso do WideImage, redimensionar uma imagem e cortar o excesso, para tal vamos usar dois comandos o resize (redimensionar) e o crop (cortar).

O resize

O resize tem 4 parâmetros:

$img->resize('largura','altura','tipo','escala');

O primeiro e o segundo parâmetro são fáceis, um detalhe é que o valor é em pixels e apenas o número ($img->resize(200,100);), o terceiro é referente ao tipo do corte, como assim? Assim:

• inside - é o valor padrão, significa que a imagem será redimensionada mantendo as proporções (sem distorcer), mas dentro do espaço informado e possivelmente ficando menor.
• outside - significa que a imagem será redimensionada mantendo as proporções (sem distorcer), mas preenchendo todo o espaço dado e possivelmente ficando maior.
• fill - seta o valor exato da imagem sem se preocupar com as proporções

Um exemplo aqui seria enviar uma imagem de 100x50px e informar $img->resize(200,200), em inside você vai acabar com uma imagem 200x100px, em outside a imagem vai ter 200x400px e em fill vai ter exatamente 200x200px, porém irá distorcer.

O último atributo é a escala, mas não vamos falar dele aqui.

Um detalhe a se entender é que quando você envia ou a largura ou a altura, a outra medida não enviada é descoberta automaticamente pelo WideImage, por exemplo, se você enviar a largura da imagem a altura é calculada automaticamente pelo WideImage ao redimensionar e isso funciona ao contrário (caso a altura seja enviada).

O crop

O crop também possui 4 atributos:

$img->resize('esquerda','topo','largura','altura');

Um pouco mais complicado de se usar, o esquerda é o espaço da borda esquerda que queremos pegar (ex.: 10px da esquerda pra dentro da imagem) e o topo é a distância do topo que queremos (ex.: 25px do topo), largura e altura são medidas a partir dos pontos informados, o legal aqui (e no resize) é que podemos usar porcentagem (ex.: '50%') em vez de números ou até fazer "contas" simples ou complicadas entre eles, exemplo:

include 'WideImage/WideImage.php';
$img = WideImage::load('big.png');
$img = $img->resize(200,100,'outside');
$img  =$min->crop('50%-100','50%-50',200,100);

Vou exeplicar, incluimos ao WideImage (linha 1) carregamos a imagem (linha 2), redimensionamos com sobra (linha 3) e removemos as sobras, mantendo apenas o centro da image (linha 4).

Parece complicado, mas note que usamos apenas 4 linhas para isso

E o CakePHP com isso

Pra usar no CakePHP é bem fácil, basta você descompactar o WideImage na pasta vendor, aqui eu vou fazer assim:

• app/Vendor
  • WideImage/...script aqui dentro

E no Model (o lugar mais indicado acredito eu):

App::import('Vendor', 'WideImage/WideImage');
$img = WideImage::load('big.png');
$img = $img->resize(200,100,'outside');
$img = $min->crop('50%-100','50%-50',200,100);

E pra salvar?

Pra salvar vamos usar o próprio WideImage:

$img->saveToFile('/path/to/image.png');

Lembrando sempre de usar as constantes (WEB_ROOR, DS, ROOT...) do CakePHP pra salvar corretamente sua imagem.

Se você leu o artigo Upload de arquivos e imagens no CakePHP sem plugin pode colar a função abaixo no model e alterar a função upload, assim:

/**
 * Faz o tratamento da imagem
 * @access public
 * @param Array $imagem
 * @param String $data
*/ 
public function trata_imagem($imagem, $dir)
{
    App::import('Vendor', 'wideimage/WideImage');

    //Tamanho 800x600px para a imagem completa
        $img = WideImage::load($imagem['tmp_name']);  
        $img = $img->resize(800,600,'outside');

    //Tamanho 200x200px para miniatura
        $min = $img->resize(200,200,'outside');  
        $min = $min->crop('50%-100','50%-100',200,200);

    //Tamanho 200x200px em preto e brando para miniatura (efeito hover)
        $min_pb = $img->resize(200,200,'outside');  
        $min_pb = $min_pb->crop('50%-100','50%-100',200,200);
        $min_pb = $min_pb->asGrayscale();

    //Salva as imagens
        $img->saveToFile($dir.$imagem['name']);
        $min->saveToFile($dir.'thumb_'.$imagem['name']);
        $min_pb->saveToFile($dir.'thumb_pb_'.$imagem['name']);
}

Eu adicionei uma imagem grande e completa e duas miniaturas, assim você pode configurar no frontend um efeito quando o mouse estiver em cima.

Agora na função upload troque a linha:

$this->move_arquivos($imagem, $dir);  

Por

$this->trata_imagem($imagem, $dir);

E agora?

E agora pronto, já terminamos! E se você tiver permissão de escrita e leitura na pasta que vai salvar não terá problemas.

Até o próximo artigo.