leitura de
Encontrou um problema no conteúdo? Por favor, deixe seu comentário!

Fala fala minha gente! Tudo na mais devida paz? :)

Hoje vou falar mais um pouquinho sobre a classe Redimensionando imagens automaticamente com o PHP.

A classe WideImage te ajuda manipular imagens salvas no seu site de forma extemamente fácil e intuitiva, com ela você pode:

  • Redimensionar imagens;
  • Cropar (cortar) imagens;
  • Inserir marca d'agua na imagem;
  • Mesclar imagens;
  • Converter a imagem em escalas de cinza;
  • E muito mais...

Atenção: A classe WideImage tem alguns pré-requisitos:

  • PHP 5.2 ou superior (pode funcionar em versões anteriores, mas sem direito a suporte)
  • Extensão GD2 do PHP
  • Memória o suficiente para carregar as imagens

Carregando Imagens para a Memória

Quando você for usar a classe para manipular uma imagem você precisa, claro, carregar a imagem antes… Existem duas formas de fazer isso:

Feito isso você carregou a imagem para e memória do PHP.

Redimensionando Imagens

Depois de carregada uma imagem pode ser redimensionada… Existem três tipos de redimensionamento:

  • inside - A imagem será redimensionada para caber dentro da largura e altura especificada, não distorce a imagem (tipo padrão)
  • outside - A imagem será redimensionada para preencher a largura e altura especificada, não distorce a imagem
  • fill - A imagem será redimensionada para preencher por completo a largura e altura especificada, distorce a imagem se necessário

Isso fará com que a imagem seja redimensionada para caber dentro de um quadrado de 200x200 píxels… A imagem final poderá ter 200x200, 100x200 ou 200x100 pois todos esses tamanhos estão menores ou iguais a 200x200 píxels.

Isso fará com que a imagem seja redimensionada para preencher um quadrado de 350x200 píxels… Se as proporcões da imagem forem maiores que essa proporção de 350x200 a imagem final será maior que o 350x200. Suponhamos que imagem fosse um quadrado de 500x500, depois de redimensionada ela terá 350x350, pois ela está preenchendo o quadrado de 350x200 mas precisa manter a sua proporção original de 1:1… Se o tipo de redimensionamento fosse “fill” a imagem final teria sempre 350x200, mesmo que ela fosse menor antes, pois o fill distorce a imagem quando necessário.

Existe ainda um quarto parâmetro que é a “direção” do redimensionamento, os seus valores possíveis são:

  • any - A imagem será redimensionada sempre, seja ela maior ou menor que as dimensões de destino (direção padrão)
  • down - A imagem será redimensionada apenas quando ela for maior que as dimensões de destino
  • up - A imagem será redimensionada apenas quando ela for meno que as dimensões de destino

Cropando (cortando) Imagens

Você também pode cortar uma imagem carregada… O crop() é um dos métodos mais interessantes da WideImage, e usá-lo em conjunto com o método resize() é devastador…

O crop() tem quatro parâmetros: coorenada X onde o corte irá começar, coordenada Y onde o corte irá começar, largura do corte e altura do corte.

Vamos a alguns exemplos de crop:

Mas ninguém quer cortar um pedaço do canto superior direito da imagem… Geralmente precisamos fazer um corte no meio da imagem… É aí que o crop() mostra seu poder:

Veja que interessante: nos dois primeiros parâmetros usamos um posicionamento diferente… dizemos que o crop irá para a metade da imagem (50%) e voltará 50px para lagura e 40px para a altura e depois irá fazer um corte de 100x80… Genial não é? Isso fará um corte de 100x80 no meio da imagem.

E se a imagem for muito grande? Você pode acabar pegando um pedaço da imagem que não serve de nada… É aí que você aprende a usar o resize() em conjunto com o crop():

Se você gostar, também pode fazer tudo de uma vez, o que é bem mais interessante:

Salvando Imagens

Você já carregou sua imagem, redimensionou e cropou ela.. Agora só falta tirar ela da memória e salvar ela em um arquivo, substituindo (ou não) o anterior… E é assim que você faz isso:

Quando a imagem for salva em JPG você também pode definir a qualidade da imagem, diminuindo assim o tamanho do arquivo:

Enviando Imagens para o Navegador

Você também pode enviar imagens diretamente para o navegador, isso funciona bem quando você quer manipular uma imagem e exibí-la sem precisar salvá-la em um arquivo novo… É só tirar ela da memória e jogar para o navegador, assim:

Outros Exemplos

Veja aqui um exemplo onde carregamos uma imagem do HD, redimensionamos, cropamos e salvamos no mesmo local, substituindo a anterior:

E veja uma versão onde fazemos isso tudo numa linha:

E aí? Gostaram? :)

Thiago Belem / Blog

Thiago Belem


Publicado

Thiago Belem / Blog

Thiago Belem / Blog

Artigos e tutoriais sobre desenvolvimento WEB

Continue lendo