Manipulando Imagens com PHP

Quando estamos desenvolvendo aplicações web é comum nos depararmos com a necessidade de manipular ou redimensionar imagens, por isso, nesse artigo iremos apresentar a utilização de duas classes disponíveis no PHP para manipulação de imagens: a Canvas, classe fornecida pela Agência M2BR, e a WideImage.

Biblioteca para Processamento de Imagem (GD)

O PHP nos possibilita a manipulação de imagens em diversos formatos, como gif, png, jpg, wbmp e xpm. Contudo, para trabalhar com esse tipo de funcionalidade, inicialmente devemos ativar ou instalar a biblioteca GD. Ela é extremamente necessária para utilizarmos as classes de manipulação de imagens que apresentaremos a seguir.

Instalando a GD

A biblioteca GD já vem por padrão no pacote do PHP a partir da versão 4.3.0. Caso ainda não a tenha, pode baixar do site oficial (vide seção Links).

É importante prestar atenção na versão que você está utilizando, pois nas versões anteriores a 1.6, apesar de existir suporte ao formato GIF, não oferece suporte a PNG. Já as versões entre a 1.6 e a 2.0.28 suportam PNG, mas não suportam GIF.

Para checar se a GD está instalada, crie um arquivo chamado info.php com o conteúdo a seguir:

  <?
 phpinfo();
 ?>

Feche o arquivo e salve no diretório próprio do servidor web. Caso você esteja utilizando o Linux, o diretório padrão é o /var/www/.

Entre em um navegador e digite a URL http://localhost/info.php e deverá aparecer uma tela de configuração do PHP. Caso a GD já esteja instalada em algum lugar, deverá aparecer algo semelhante ao mostrado na Tabela 1.

Tabela 1. Configurações do PHP.

Se você encontrar algo semelhante ao apresentado na Tabela 1, isso quer dizer que a GD já está instalada e no máximo você precisa ativá-la. Para isso, use a configuração -with-gd[=DIR], onde DIR se refere ao diretório de instalação. Se você digitar apenas –with-gd será configurado para utilização a versão recomendada pelo PHP. Lembrando que é pré-requisito para instalação os pacotes libpng e libjpeg para que o GD possa compilar.

No Windows você também irá precisar também do php_gd2.dll que é uma extensão do php.ini.

Para instalar no Ubuntu basta digitar no terminal o seguinte comando:

 sudo apt-get install php5-gd && sudo service apache2 restart 

Um exemplo de funcionalidade bem útil fornecida por essa biblioteca é a de obter o tamanho de uma imagem. Veja como fazer isso na Listagem 1.

Listagem 1. Obtendo o tamanho de uma imagem.

  // Abrindo uma imagem PNG
  $img = imagecreatefromjpeg('/imagens/minha-foto.jpg');
  // Obtendo o tamanho do arquivo de imagem
  $tamanho = getimagesize($img);

Classe Canvas

Canvas é uma classe desenvolvida por um programador brasileiro, chamado Davi Ferreira, e inicialmente se chamava m2brimagem, mas após três anos de utilização passou a se chamar Canvas. Ela apresenta uma gama de funcionalidades para se trabalhar com manipulação de imagens em PHP:

• Encadear métodos;
• Carregar imagens sem extensão de imagens;
• Carregar imagens diretamente de um formulário utilizando apenas o arquivo temporário do PHP;
• Carregar imagens externas, via URL (vai depender do seu servidor);
• Criar uma nova imagem "vazia" apenas com cor de preenchimento;
• Adicionar legendas com posições fixas, assim como já acontecia com marcas d'água (topo_centro, baixo_esquerda etc.);
• Adicionar cor de fundo nas legendas;
• Adicionar/configurar cores passando como parâmetro um valor hexadecimal.

Redimensionando uma Imagem

Na Listagem 2 vemos como redimensionar uma imagem utilizando a classe Canvas. Use esse código em um arquivo chamado teste.php.

Listagem 2. Classe teste.php.

  <?php
  require_once( 'canvas.php' );
  $img = new canvas( 'imagem.jpg' );
  $valida = $oImg->valida();
  if ($valida == 'OK') {
          $oImg->redimensiona(200,200,'redimensiona');
      $oImg->grava();
  } else {
          die($valida);
  }
  exit;
  ?>;

Analisando o código vemos que inicialmente instanciamos o objeto da classe m2brimagem, e logo após passamos para seu construtor a localização da imagem que queremos instanciar:

  include('canvas.class.php');
  $oImg = new canvas('imagem1.jpg');

O próximo passo é validar a imagem utilizando o método valida(). Se ele devolver 'OK', então será executado o redimensionamento da imagem e a nova imagem será salva. Caso contrário, o arquivo não se refere a uma imagem ou o endereço é inválido, então será exibida uma mensagem de erro. O trecho de código responsável por isso é o apresentado na Listagem 3.

Listagem 3. Trecho da classe teste.php.

  $valida = $oImg->valida();
  if ($valida == 'OK') {
          $oImg->redimensiona(400,200);
      $oImg->grava();
  } else {
          die($valida);
  }

Para dimensionar a imagem utilizando porcentagem, você pode fazer como na Listagem 4.

Listagem 4. Redimensionamento com porcentagem.

  // 40% da altura da imagem original, largura na proporção
  $oImg->redimensiona('', '40%');
  // 70% da largura da imagem original, altura na proporção
  $oImg->redimensiona('70%', '');

Na Listagem 5 vemos um exemplo da utilização de redimensionamento com preenchimento.

Listagem 5. Redimensionando uma imagem com preenchimento.

  <?php
   
  require_once( 'canvas.php' );
  $img = new canvas( 'minha-imagem.jpg' );
   
  $img->carrega( 'minha-imagem.jpg' )
          ->hexa( '#FF005C' )
          ->redimensiona( 300, 200, 'preenchimento' )
          ->grava();

O resultado deve ser algo como na Figura 1.

Figura 1. Resultado da Listagem 5

Agora as dimensões, tal como o nome da imagem, serão passadas por parâmetro, de acordo com o código na Listagem 6.

Listagem 6. Passando o nome e as dimensões da imagem por parâmetro.

  <?php
  require_once( 'canvas.php' );
   
  $arquivo        = $_GET['arquivo'];
  $largura        = $_GET['largura'];
  $altura         = $_GET['altura'];
  $oImg = new canvas($arquivo);
  $valida = $oImg->valida();
   
  if ($valida == 'OK') {
          $oImg->redimensiona($largura,$altura,'crop');
      $oImg->grava();
  } else {
          die($valida);
  }
  exit;
   
  ?>

Outros Métodos

Agora vamos apresentar alguns métodos interessantes para manipularmos nossas imagens.

Para adicionar uma marca d'água em uma imagem basta utilizar o código a seguir:

 // nome do arquivo, dimensão x, dimensão y, alfa
  $oImg->marca('marca.png',50,20,NULL);

Para adicionar um texto ou legenda, basta adicionar o código da Listagem 7.

Listagem 7. Adicionando texto ou legenda.

     $rgb = array(255,255,255);
      // texto da legenda, tamanho do texto, x, y, cor (array rgb),
      // truetype (true ou false), nome da fonte
      $oImg->legenda('minha legenda','11','20','20',$rgb,false,NULL);

Carregando uma Imagem pela URL

A classe Canvas também fornece um método para o carregamento de imagens a partir do seu endereço de URL, como podemos ver na Listagem 8.

Listagem 8. Carregando uma imagem pela URL.

  $img->carregaUrl( '//www.devmedia.com.br/imagens/2013/Devmedia129x.png' )
          ->redimensiona( 200, 100, 'crop' )
          ->grava();

Cor

Também podemos aplicar uma cor a nossa imagem, como mostra o código da Listagem 9.

Listagem 9. Aplicando uma cor a nossa Imagem.

  $img->carrega( 'minha-imagem.jpg' )
          ->redimensiona( '50%' )
          ->filtra( 'colorir', 1, 255, 0, 92, 60 )
          ->grava();

O resultado será algo como a Figura 2.

Figura 2. Resultado da Listagem 9

WideImage

Outra classe em PHP muito poderosa para trabalhar com imagens é a WideImage. Nos exemplos a seguir veremos como utilizar alguns de seus métodos, como o resize, que serve para redimensionar, e o crop que serve para cortar imagens de forma automática. Dessa forma, poderemos gerar ou não novos arquivos com essas imagens.

Para utilizar a classe WideImage faz-se necessário o download da mesma do seu site oficial (vide seção Links). Após baixar e salvar em um diretório próprio podemos utilizá-la para a manipulação de imagens. Na Listagem 10 vemos como redimensionar uma imagem.

Listagem 10. Redimensionando uma imagem com o método resize.

  <?php
   
  // endereço para o arquivo com a classe WideImage
  require('/minhapasta/WideImage.inc.php');
   
  // Carrega a imagem que eu quero manipular
  // Coloque o endereço da foto que você quer manipular
  $image = wiImage::load('/imagens/foto.jpg');
   
  // Redimensiona a imagem
  $image = $image->resize(400, 300);
   
  // Você pode opitar por salvar a imagem em um novo arquivo ou substitur o antigo
  $image->saveToFile('/caminho/nova_foto.jpg');

Na Listagem 11 vemos como utilizar essa classe para cortar uma imagem.

Listagem 11. Cortando uma imagem.

  <?php
   
  require('/caminho/WideImage.inc.php');
  $image = wiImage::load('/caminho/foto.jpg');
   
  // Corta a imagem (Você deverá passar como argumentos: X1, Y1, X2, Y2)
  $image = $image->crop(10, 20, 110, 120);
   
  $image->saveToFile('/caminho/nova_foto.jpg');

Agora vamos ver como mudar a qualidade das imagens de acordo com o código da Listagem 12.

Listagem 12. Alterando a qualidade de uma imagem.

  <?php
   
  // Chama o arquivo com a classe WideImage
  require('/caminho/WideImage.inc.php');
   
  // Carrega a imagem a ser manipulada
  $image = wiImage::load('/caminho/minhafoto.jpg');
   
  // Salva a imagem em um arquivo com 70% de qualidade
  $image->saveToFile('/caminho/foto_alterada.jpg', null, 70);

Dentre as funcionalidades oferecidas por essa classe está a de inserir uma imagem dentro da outra, criando um efeito de marca d'agua, como mostra a Listagem 13.

Listagem 13. Criando uma Marca D'água.

  require( "wideimage/WideImage.php");
   
  $image = WideImage::load("img/imagem-principal.png");
  $marca = WideImage::load("img/imagem-marca.png");
   
  $nova_img = $image->merge($marca,'right','bottom');
   
  $nova_img->output('jpg', 90);

Vemos que na segunda linha carrega-se a imagem principal que queremos inserir a marca d'agua e na linha seguinte a imagem que será a marca d'água.

Veja que tilizamos o método merge na imagem principal para passamos como parâmetro o arquivo com a marca d'agua. Os outros dois parâmetros são as posições x e y, onde a marca deverá estar. Poderíamos ter passado o valor em pixel, mas optamos pela posição.

Manipulando Imagens em um Projeto no Framework PHP Yii

Veremos nessa seção como manipular uma imagem utilizando o framework PHP Yii. Assumindo que o mesmo está instalado no diretório YiiRoot e que a raiz do seu servidor web é o WebRoot, abra o prompt de comando e digite o comando a seguir para criar uma pequena aplicação:

 % YiiRoot/framework/yiic webapp WebRoot/testdrive 

Após a execução do comando será gerado um esqueleto de uma aplicação Yii no diretório base do seu servidor web. Para ver o resultado desse comando basta acessar o seguinte endereço: http://nomedoservidor/testdrive/index.php.

A página principal da nossa aplicação deve ser a mesma da Figura 3.

Figura 3. Acesso ao servidor

A estrutura de arquivos e diretórios geradas pelo Yii é a apresentada na Figura 4.

Figura 4. Estrutura gerada pelo Yii

O PHP Yii trabalha com arquitetura MVC, ou seja, toda a aplicação está dividida em três camadas. A primeira é o modelo, responsável por manipular as informações de forma mais detalhada e responsável por todas as regras de negócios do site ou sistemas. A segunda camada é a Visão, responsável por prover uma interface de visualização dos sistemas ou site ao usuário. E a terceira camada é a de controle, responsável por controlar todo o fluxo de informação que passa pelo site ou sistema.

A camada que irá nos interessar é a de visão, pois iremos utilizar as classes vistas anteriormente para manipular algumas imagens da nossa aplicação.

Você deverá salvar todas as imagens que deseja utilizar na pasta testdrive/images. Depois entre na pasta views e crie um novo arquivo de visão chamado _view.php, e implemente nele o código da Listagem 14.

Listagem 14. Arquivo de Visão.

  <div class="view">
   
              <!--        Visao parcial de um usuário-->
          
              <?php $img = CHtml::image(Yii::app()->request->baseUrl.'/images/perfilmed.jpg', 'update');
              echo CHtml::link($img);
              ?> <br/>
   
  </div>

No código apresentado basicamente criamos um arquivo PHP com uma div HTML dentro para que posteriormente possamos atribuir estilos CSS a essa nossa página. Em seguida criamos uma variável chamada $img que recebe essa linha de código:

  CHtml::image(Yii::app()->request->baseUrl.'/images/perfiL.jpg', 'update'); 

Em termos gerais, essa linha solicita a imagem na URL /images/perfil,jpg e a salva dentro da variável $img. Em seguida imprimimos essa imagem na tela como o comando:

  echo Chtml::link($img); 

Classe Canvas

Agora vamos adicionar os métodos que aprendemos anteriormente para manipularmos essa imagem.

Para redimensionar uma imagem usamos o código da Listagem 15.

Listagem 15. Redimensionando uma imagem no Yii.

  <?php
   
  require_once( 'canvas.php' );
  $img = new canvas( '/images/perfil.jpg' );
  $oImg->redimensiona(200,200,'redimensiona');
  $oImg->grava();
  ?>
   
  <div class="view">
   
              <!--        Visao parcial de um usuário-->
          
              <?php $nimg = Chtml::image(Yii::app()->request->baseUrl.'/images/perfilmed.jpg','update');
              echo CHtml::link($nimg);
              ?> <br/>
   
  </div>

Veja que estamos pegando a imagem que imprimimos anteriormente e utilizamos a classe canvas para redimensionar, passando como parâmetro as dimensões 200 e 200.

Se quisermos adicionar uma legenda nessa foto, devemos utilizar o código da Listagem 16.

Listagem 16. Adicionando uma legenda na foto.

  <?php
   
  require_once( 'canvas.php' );
  $img = new canvas( '/images/perfil.jpg' );
  $rgb = array(255,255,255);
  // texto da legenda, tamanho do texto, x, y, cor (array rgb),
  // truetype (true ou false), nome da fonte
  $oImg->legenda('minha legenda','11','20','20',$rgb,false,NULL);
  ?>
   
  <div class="view">
   
          <!--        Visao parcial de um usuário-->
          
          <?php $nimg = CHtml::image(Yii::app()->request->baseUrl.'/images/perfil.jpg', 'update');
          echo CHtml::link($nimg);
          ?> <br/>
   
  </div>

Classe WideImage

Para redimensionar uma imagem utilizando a classe WideImage no PHP Yii, devemos utilizar o código da Listagem 17.

Listagem 17. Redimensionando uma imagem com a WideImage no PHP Yii.

  <?php
  // endereço para o arquivo com a classe WideImage
  require('/minhapasta/WideImage.inc.php');
   
  // Carrega a imagem que eu quero manipular
  // Coloque o endereço da foto que você quer manipular
  $image = wiImage::load('/imagens/perfil.jpg');
   
  // Redimensiona a imagem
  $image = $image->resize(400, 300);
   
  // Você pode opitar por salvar a imagem em um novo arquivo ou substitur o antigo
  $image->saveToFile('/caminho/perfil.jpg'); //optei por substituir a imagem antiga pela nova
   
  ?>
   
  <div class="view">
   
              <!--        Visao parcial do usuário-->
          
          <?php $nimg = CHtml::image(Yii::app()->request->baseUrl.'/images/perfil.jpg', 'update');
          echo CHtml::link($nimg));
          
          ?> <br/>
  </div>

Agora vamos alterar a qualidade da nossa imagem utilizando o código da Listagem 18.

Listagem 18. Redimensionando uma imagem.

  // Chama o arquivo com a classe WideImage
  require('/caminho/WideImage.inc.php');
   
  // Carrega a imagem a ser manipulada
  $image = wiImage::load('/caminho/perfil.jpg');
   
  // Salva a imagem em um arquivo com 70% de qualidade
  $image->saveToFile('/caminho/perfil.jpg', null, 70);
   
  <div class="view">
   
              <!--        Visao parcial do usuário-->
          
          <?php $nimg = CHtml::image(Yii::app()->request->baseUrl.'/images/perfil.jpg', 'update');
          echo CHtml::link($nimg));
          
          ?> <br/>
  </div>
  

Espero que tenham gostado. Até mais.

Links

Classe Canvas
https://github.com/daviferreira/canvas

Download de WideImage
http://wideimage.sourceforge.net/

Processamento de Dados
http://libgd.github.io/