Fala fala minha gente! Tudo na mais devida paz?
Hoje vou falar mais um pouquinho sobre a classe WideImage (agora na versão 9.09.04) que eu já falei um pouco no artigo 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:
// Carrega a imagem de um arquivo
$img = WideImage::load('imagens/minha_foto.jpg');
// Carrega a imagem de um arquivo
$img = WideImage::loadFromFile('imagens/minha_foto.jpg');
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
// Redimensiona a imagem para caber em um quadrado de 200x200px $img = $img->resize(200, 200, 'inside');
Isso fará com que a imagem seja redimensionada para caber dentro de um quadrado de 200×200 píxels… A imagem final poderá ter 200×200, 100×200 ou 200×100 pois todos esses tamanhos estão menores ou iguais a 200×200 píxels.
// Redimensiona a imagem para preencher um quadrado de 350x200px $img = $img->resize(350, 200, 'outside');
Isso fará com que a imagem seja redimensionada para preencher um quadrado de 350×200 píxels… Se as proporcões da imagem forem maiores que essa proporção de 350×200 a imagem final será maior que o 350×200.
Suponhamos que imagem fosse um quadrado de 500×500, depois de redimensionada ela terá 350×350, pois ela está preenchendo o quadrado de 350×200 mas precisa manter a sua proporção original de 1:1… Se o tipo de redimensionamento fosse “fill” a imagem final teria sempre 350×200, 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:
// Corta um quadrado de 150x150px no canto superior direito da imagem $img = $img->crop(0, 0, 150, 150);
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:
// Corta um quadrado de 100x80px no meio da imagem
$img = $img->crop('50% - 50', '50% - 40', 100, 80);
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 100×80… Genial não é? Isso fará um corte de 100×80 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():
// Redimensiona a imagem para preencher uma area de 100x80
$img = $img->resize(100, 80, 'outside');
// Corta um quadrado de 100x80px no meio da imagem
$img = $img->crop('50% - 50', '50% - 40', 100, 80);
Se você gostar, também pode fazer tudo de uma vez, o que é bem mais interessante:
// Redimensiona e corta a imagem
$img = $img->resize(100, 80, 'outside')->crop('50% - 50', '50% - 40', 100, 80);
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:
// Salva a imagem em um novo arquivo
$img->saveToFile('/imagens/minha_foto_menor.jpg');
Quando a imagem for salva em JPG você também pode definir a qualidade da imagem, diminuindo assim o tamanho do arquivo:
// Salva a imagem em um novo arquivo com 80% de qualidade
$img->saveToFile('/imagens/minha_foto_menor.jpg', null, 80);
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:
// Define o tipo de cabeçalho para exibir a imagem corretamente
header("Content-type: image/jpeg");
// Envia a imagem para o navegador com 80% de qualidade
$img->asString('jpg', 80);
Outros Exemplos
Veja aqui um exemplo onde carregamos uma imagem do HD, redimensionamos, cropamos e salvamos no mesmo local, substituindo a anterior:
$arquivo = '/imagens/fotos/tiutalk.jpg';
// Carrega a imagem
$img = WideImage::load($arquivo);
// Redimensiona a imagem para um quadrado de 100x100
$img = $img->resize(100, 100, 'outside');
// Corta um quadrado de 100x100 no centro da imagem
$img = $img->crop('50% - 50', '50% - 50', 100, 100);
// Salva a imagem substituindo a antiga
$img->saveToFile($arquivo);
// Limpa a imagem da memória
$img->destroy();
E veja uma versão onde fazemos isso tudo numa linha:
$arquivo = '/imagens/fotos/tiutalk.jpg';
WideImage::load($arquivo)->resize(100, 100, 'outside')->crop('50% - 50', '50% - 50', 100, 100)->saveToFile($arquivo)->destroy();
E aí? Gostaram?
Você também vai gostar de ler:
- Redimensionando imagens automaticamente com o PHP
- Segurança – Manipulando erros no PHP
- Sistema de rotação de banners e imagens em PHP
- Manipulando diretórios e pastas com PHP
- Manipulando dados do MySQL com o PHP
Postado em Destaques, PHP, Tutoriais
Com as tags Artigo, Canto, Classe, Classes, Cortar, Cropar, File, GD, Header, Manipulação de Imagens, Navegador, Parâmetros, PHP, PHP 5, POO, Redimensionar, Resize, Scripts, source, WideImage
Escrito por Thiago Belem
Gostou desse artigo?
Não se esqueça de assinar o RSS e divulgue-o para o mundo:

show esse tutorial tava precisando algo parecido tipo posso usar isso para redimencionar imagem antes de enviar para o BD ? por formulario? vlw
Muito bom cara o artigo… PARABENS!!!
so corrige uma coisa, pra mostrar a imagem no navegador nao é o metodos asString
$img->asString(‘jpg’, 80);// errado
e sim usando o metodo output
$img->output(‘jpg’, 80);// certo
mas muito bom essa class, eu nao conhecia… dei uma linda no artigo e fui procurar a documentaçao no site… realmente uma excelente class…
nos poupa muito trabalho!
abraço!!!
@Jessé
Está correto.. Obrigado pela colaboração!
Hi, just wanted to let you know I’ve just released the next version, which also supports alignment coordinates, such as:
$cropped = $image->crop(‘center’, ‘bottom’, 150, 100);
Also, the liibrary supports outputting the image directly to the browser, and adds Content-type and Content-length headers automatically:
$image->output(‘gif’);
See the release notes:
http://wideimage.sourceforge.net/2010/02/wideimage-10-02-08-released/
Best regards and thanks for the article,
Gasper
Thiago, a imagem a ser manipulada pode ser EPS em CMYK?
Obrigado!
Olá Thiago…
Muito legal!
Vou tentar usar no meu projeto.
Obrigado!
ótimo artigo thiago, parabéns !
Muito bom Thiago. Já fazia o resize com a biblioteca GD do PHP, mas com esse manipulador a coisa fica mais organizada. E se tivesse descoberto antes, teria economizado mais tempo… Existem tantas ferramentas na Web, se duvidar é só juntar os pedaços e sair criando.. hehe
Muito bom seu site, e com exelentes dicas. Parabéns.
BEm interessante, tava procurando algo parecido.
[]´s
O WhideImage é bem interessante mesmo. Eu já conhecia ele, e usava-o até certo tempo atrás… quando conheci esse script aqui: Verot.
Eu achei esse script do Verot muito mais fácil de trabalhar e com muito mais opções de manipulação das imagens… e dá até pra fazer upload de arquivos alheios como: arquivos de áudio, ou documetos .PDF ou do word;
Agora tem uma coisa que eu não estou conseguindo nem com o Wideimage, nem com o Verot: Redimensionar imagens em tempo de execução, ou seja, ná propria página HTML ou PHP, sem ter que salvar essa imagem em algum diretório.
@Gabriel
Existe um exemplo de como fazer isso no “Enviando Imagens para o Navegador“.
Valew Thiago… o meu script tava certo… igual ao do exemplo do site… o problema que tava dando era na codificação do arquivo, que estva com BOM, por isso não funcionava.
Otemo artigo!!! poderia mostrar um sistema de noticias completo em OO
Otemo artigo!!!!!!!!!!! vc podia mostrar como fazer um sistema de noticia completo em OO
Gostei muito… Teria como ensinar fazer o crop e o resize com o jquery junto com o php…
Visito seu blog todo dia procurando novidades e te sigo no twitter…
Aprendi muito aqui…
@Rodrigo
Existe um plugin de jQuery chamado jCrop que já faz isso…
Bem interessante esta classe e as explicações.
Eu desenvolvi minhas proprias funções que fazem isso.
Parabens pelo artigo.