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/.
Gostou deste artigo?
Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!
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.