Ficando Gráfico com PHP

Criar e manipular imagens usando a biblioteca GD de PHP

Imagine criar gráficos de páginas da Web de forma dinâmica usando apenas código — não há necessidade de um programa de gráficos complexo. A criação e manipulação de imagens é sua para o feito com o poder de PHP. Coloque suas qualificações de codificação para funcionarem gerando imagens para a Web.

Ken Bluttman, Freelance Web Developer, Freelance Consultant

Ken BluttmanKen Bluttman vem se divertindo com teclados de computador há quase duas décadas. Ao longo do caminho, ele conquistou várias linguagens de programação e escreveu meia dúzia de livros sobre computadores. E há sempre um amanhã para se fazer mais.



01/Jul/2008

Antes de Começar

É aconselhável realizar uma atualização dos métodos básicos de programação PHP antes de iniciar este tutorial. Conhecimento do processamento de imagens e gráficos é útil. Deve-se entender pixels, formas, tipos de arquivos gráficos, redimensionamento e conceitos semelhantes de manipulação de gráficos.

Sobre este Tutorial

Este tutorial percorre o uso da biblioteca GD, mostrando como criar e alterar imagens em páginas da Web. Começa com a construção básica de GD, então soma a ela para apresentar várias técnicas gráficas.

Objetivos

O propósito deste tutorial é mostrar como iniciar com a biblioteca GD e fornecer diversas técnicas que podem ser aplicadas à codificação de sua página da Web. O tutorial não cobre toda função GD, mas ensina o básico. A seção Recursos fornecer Web sites onde pode-se aprender mais sobre como usar a biblioteca GD.

Pré-requisitos

Um conhecimento de trabalho com PHP ajudará muito a acompanhar este tutorial. Deve-se ter também conhecimento geral de programação. Os requisitos específicos de sintaxe, apesar de semelhantes a algumas outras linguagens de programação, podem exibir algum estudo.

Requisitos do Sistema

Servidor da Web
Qualquer sistema operacional e qualquer servidor da Web pode ser usado. Sinta-se livre em usar o Apache V2.X ou o IBM® HTTP Server. Faça download da Apache ou da IBM.
PHP
PHP V5.1.4 ou posterior é necessário.
GD
Desde o PHP V4.3, uma versão da biblioteca GD é fornecida no pacote configurável de instalações do PHP. Não é necessário se preocupar com esse requisito se estiver usando uma versão posterior. Use phpinfo() para ver se sua instalação PHP está ativada para GD. A seção "Introduzindo GD" discute o histórico e as versões de GD e onde localizar a biblioteca.

Introduzindo GD

PHP é uma linguagem de programação baseada no servidor da Web amplamente usada. Uma grande maioria de sites da Internet e intranets usam PHP para diversas tarefas. Trabalhar com um banco de dados é uma aplicação bem conhecida de PHP.

Este tutorial foca uma parte diferente da capacidade e do poder de PHP: mostra como usar a biblioteca GD para criar e manipular gráficos. Essa biblioteca fornece diversas opções que permitem criar formas, como retângulos, elipses, linhas e arcos. Além disso, diversos métodos permitem trabalhar com tipos de arquivos gráficos populares, como GIF, JPG e PNG.

O tutorial o direciona passo-a-passo pela criação e mudança de imagens — vetoriais e rasterizadas. Gráficos vetoriais consistem em retângulos, linhas, círculos, etc. Gráficos rasterizados geralmente são fotografias ou tipos de arquivos considerados fixos para sua imagem (bitmaps, GIFs, JPEGs, etc.). Para o propósito desde tutorial, não é necessário saber os detalhes de vetores e rasters.

Verificar a Versão de sua Biblioteca GD

Vetores e Rasters

Vetores são representações visuais de fórmulas matemáticas. Não é necessário ver a matemática, por si só, pois funções integradas são usadas como wrappers em torno dos cálculos brutos. Uma vantagem de gráficos vetoriais é que eles mantêm sua nitidez, independentemente do redimensionamento. Os gráficos rasterizados, como fotografias salvas como JPEGs, perdem a nitidez conforme redimensionados para um tamanho maior. Torná-los menores mantém a nitidez.

Diversas versões da biblioteca GD estão disponíveis. As instalações de PHP V5 têm a V2.x da biblioteca em pacote configurável com a instalação PHP. Versões anteriores de PHP podem ter uma GD versão 1.x; GD possui uma instalação extra nas versões mais antigas de PHP, portanto, é possível que GD não esteja instalada. Sua primeira tarefa é verificar qual versão está em execução em seu servidor da Web.

A função gd_info da GD retorna informações sobre a biblioteca GD. Siga estas etapas:

  1. A Lista 1 mostra uma rotina curta que relata os detalhes da biblioteca. Insira o código e salve o arquivo como gd_info.php. (O arquivo pode ser denominado como desejar, desde que tenha a extensão .php.)
Listagem 1. Usando gd_info
<?php
$array=gd_info ();
foreach ($array as $key=>$val) {
   if ($val===true) {
      $val="Enabled";
   }
   if ($val===false) {
      $val="Disabled";
   }
   echo "$key: $val <br />\n";
}
?>
  1. Faça upload do arquivo para seu servidor da Web e navegue até a página através de um navegador. Segue um resultado de amostra conforme visualizado em um navegador.
Listagem 2. Um resultado de amostra
GD Version: bundled (2.0.34 compatible)
FreeType Support: Enabled
FreeType Linkage: with freetype
T1Lib Support: Disabled
GIF Read Support: Enabled
GIF Create Support: Enabled
JPG Support: Enabled
PNG Support: Enabled
WBMP Support: Enabled
XPM Support: Disabled
XBM Support: Enabled
JIS-mapped Japanese Font Support: Disabled

Informações Adicionais sobre PHP

Assim como gd_info() retorna informações sobre a instalação da GD, php_info() retorna informações sobre toda a configuração de PHP. Coloque a instrução phpinfo(); única em um arquivo PHP e execute-o.

A primeira linha retorna a versão da GD. Neste caso, a versão é 2.0.34, mas fazer referência a ela como 2.0 é suficiente. Algumas das funções usadas neste tutorial estão disponíveis somente com a GD V2.x. O tutorial foi escrito supondo que você esteja executando a GD V2.x.

Se descobrir que sua instalação PHP não inclua a biblioteca GD, consulte Recursos para fazer download da mesma.


Criar sua Primeira Imagem

Chegou a hora de arregaçar as mangas e ficar criativo. Esta seção demonstra alguns gráficos básicos que incorporam elementos de PHP — principalmente looping.

Insira cada exemplo em um editor baseado em texto e salve-o com uma extensão PHP (.php), coloque-o então em seu servidor da Web e acesse-o através de um navegador.

Inicie com o Básico

A Listagem 3 mostra um script GD básico de PHP. Um número mínimo de instruções GD são usadas para criar um gráfico simples.

Listagem 3. Um script GD básico
<?php
// file type
header("Content-type: image/png");
// create image
$img = imagecreatetruecolor(300, 350);
// set colors
$blue = imagecolorallocate($img, 0, 0, 255);
$green = imagecolorallocate($img, 0, 255, 0);
// draw two rectangles, one is filled
imagerectangle($img, 20,20,120,120, $blue);
imagefilledrectangle($img, 150,150,250,320, $green);
// display image
imagepng($img);
// release image from memory
imagedestroy($img)
?>

Salve o código da Lista 3 como um arquivo PHP e execute-o a partir de seu servidor da Web. O navegador produz o gráfico mostrado na Figura 1.

Figura 1. Uma Gráfico Simples Contendo uma Imagem
Uma Gráfico Simples Contendo uma Imagem

Vamos ver como isso funciona:

Sobre RGB

RGB é uma função de cor padrão usada em muitas linguagens de programação. O acrônimo significa Vermelho, Verde, Azul. Um número de 0 a 255 é aplicado para cada uma dessas três cores básicas. Por exemplo, RGB(255,0,0) cria vermelho. Valores mistos criam todas as variações de cores. RGB(0,0,0) cria preto e RGB(255,255,255) cria branco.

  1. Um tipo de arquivo é indicado. Referindo-se à instalação de exemplo da GD, PNG, GIF e JPG estão disponíveis. Aqui, um tipo de arquivo PNG é selecionado.
  2. A função imagecreatetruecolor() é o burro de carga que inicia o gráfico. Ela, essencialmente, cria a tela na qual imagens são desenhadas. Os dois parâmetros da função são largura e altura da tela, em pixels. A função imagecreatetruecolor retorna um identificador. Neste exemplo, uma variável denominada $img. $img é, então, usada para vincular outras funções à tela. Por padrão, a tela é preta.
  3. As cores são configuradas com a função imagecolorallocate . Os parâmetros aqui são o identificador da imagem ($img) e a cor. Neste caso, o método RGB padrão é usado para indicar a cor (consulte a barra lateral "Sobre RGB").
  4. imagerectangle desenha um retângulo não preenchido e imagefilledrectangle desenha um preenchido. Ambos usam os mesmos parâmetros: o identificador da imagem, as coordenadas (os dois primeiros valores determinam o canto superior esquerdo e os dois últimos determinam o canto inferior direito) e a cor. Observe que as cores são selecionadas usando cores predeterminadas criadas com imagecolorallocate.
  5. imagepng(handle) exibe a imagem e imagedestroy limpa a memória usada no processamento da imagem. Não remove a imagem do navegador.

Posicione com Camadas

Vamos tornar este exemplo mais interessante. A Figura 2 mostra uma tela vermelha com quatro retângulos na mesma. Observe como os retângulos estão sobrepostos, fornecendo um efeito em camadas.

Figura 2. Retângulos Sobrepostos
Retângulos Sobrepostos

O código que criou esse gráfico aparece na Lista 4.

Listagem 4. Criando retângulos
<?php
// file type
header ("Content-type: image/png");
// create image
$img = imagecreatetruecolor(350, 300);
// define colors
$red = imagecolorallocate($img, 255, 0, 0);
$blue = imagecolorallocate($img, 0, 0, 255);
$green = imagecolorallocate($img, 0, 255, 0);
$white = imagecolorallocate($img, 255, 255, 255);
$black = imagecolorallocate($img, 0, 0, 0);
// set background color
imagefill($img, 0, 0, $red );
// draw filled rectangles
imagefilledrectangle($img, 10,10,160,110, $blue);
imagefilledrectangle($img, 40,40,190,140, $green);
imagefilledrectangle($img, 70,70,220,170, $white);
imagefilledrectangle($img, 100,100,250,200, $black);
// display the image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Este exemplo introduz uma nova função: imagefill. Essa função configura a tela para uma cor designada — vermelho, neste caso. Os quatro parâmetros são o identificador da imagem, as coordenadas esquerda e superior e a cor.

Verificando as quatro funções imagefilledrectangle , um padrão de posicionamento é evidente. Os retângulos são sobrepostos com base nos valores usados para determinar o canto superior esquerdo. A coordenada superior esquerda aumenta em cada retângulo sucessivo, mas não o suficiente para evitar o retângulo antes dele. Isso cria a sobreposição. O segundo conjunto de números, que determina os cantos inferiores direito, aumentam em quantidade igual aos valores das coordenadas superiores. Isso mantém os retângulos com o mesmo tamanho.

A Listagem 5 é praticamente idêntica à Lista 3. A diferença é que lista quatro retângulos em ordem oposta, que cria a aparência da sobreposição funcionando na direção oposta.

Listagem 5. Reordenando os retângulos
<?php
// file type
header ("Content-type: image/png");
// create image
$img = imagecreatetruecolor(350, 300);
// define colors
$red = imagecolorallocate($img, 255, 0, 0);
$blue = imagecolorallocate($img, 0, 0, 255);
$green = imagecolorallocate($img, 0, 255, 0);
$white = imagecolorallocate($img, 255, 255, 255);
$black = imagecolorallocate($img, 0, 0, 0);
// set background color
imagefill($img, 0, 0, $red );
// draw filled rectangles
imagefilledrectangle($img, 100,100,250,200, $black);
imagefilledrectangle($img, 70,70,220,170, $white);
imagefilledrectangle($img, 40,40,190,140, $green);
imagefilledrectangle($img, 10,10,160,110, $blue);
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

A Figura 3 mostra como os retângulos aparecem agora. A primeira vista, parece que os retângulos mudaram de direção, mas é apenas artifício de código. Os retângulos estão nos mesmos pontos que na Figura 2, mas o efeito de sobreposição é reverso e fornece uma perspectiva exclusivamente diferente.

Figura 3. Retângulos Reversos
Retângulos Reversos

Inclua um Pouco de Matemática

É possível criar a imagem na Figura 4 com um conjunto de retângulos vermelhos que aumentam em tamanho e se sobrepõem, criando uma imagem exclusiva. Parece algo como uma gravata, apesar de essa não ter sido a intenção.

Figura 4. Sucessão de Retângulos Crescente
Sucessão de Retângulos Crescente

A Listagem 6 mostra o código que produz essa imagem.

Listagem 6. Usando um loop para controlar tamanho e posição
<?php
// file type
header("Content-type: image/png");
// create image
$img = imagecreatetruecolor(400, 400);
// set colors
$green = imagecolorallocate($img, 0, 255, 0);
$red = imagecolorallocate($img, 255, 0, 0);
// set background to green
imagefill($img, 0, 0, $green );
for ($i=1;$i<=25;$i++) {
  imagefilledrectangle($img, $i * 8, $i * 8, $i * 10, $i * 10, $red);
}
// display the image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

A Listagem 6 usa os valores iniciais das coordenadas e um loop for para criar a sucessão de triângulos vermelhos. A função imagefill usa verde neste exemplo para colorir a tela.

Entre na Onda Circular

A Figura 5 mostra outra imagem que pode ser criada com um mecanismo de loop. Mas, surpresa... se distancia de retângulos e, em vez disso, usa elipses. Uma elipse pode ser um círculo ou uma forma oval, dependendo das configurações.

Figura 5. Elipses
Ellipses

As formas ovais são criadas usando a sucessão de elipses que reduzem em direção ao centro da tela. As cores são geradas aleatoriamente. Toda vez que você atualiza a janela do navegador, aparece um esquema de cores diferente. A essência é mostrada abaixo.

Listagem 7. Criando elipses coloridas aleatoriamente
<?php
// file type
header("Content-type: image/png");
// create image
$img = imagecreatetruecolor(400, 400);
// set background to light gray
imagefill($img,0,0,imagecolorallocate($img, 221, 221, 221));
// draw ellipses with random colors
for ($i=20;$i>=1;$i--) {
 imagefilledellipse($img, 200,200,$i*14,$i*10,
 imagecolorallocate($img, rand(50,255), rand(50,255), rand(50,255)));
}
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Observe que o loop for está estruturado para ser executado a partir do maior valor. Se o valor do loop tiver aumentado, a elipse final cobriria todas as outras. Ao executar o loop do maior para o menor, é possível ver todas as elipses.

A linha de código meio longa (mostrada aqui como duas linhas para se ajustar nesta página)

 imagefilledellipse($img, 200,200,$i*14,$i*10,
imagecolorallocate($img, rand(50,255), rand(50,255), rand(50,255)));

usa a função imagefilledellipse para criar cada elipse. Os parâmetros são típicos: o identificador da imagem, as coordenadas iniciais e a largura e a altura. Observe que as coordenadas de uma elipse indicam o centro da elipse, não um ponto ao longo da borda. Com uma tela com tamanho 400x400, as elipses são gradas a partir do centro da tela, na posição 200,200.

A cor de cada elipse é gerada aleatoriamente, usando a função rand PHP em conjunto com as configurações RGB. Por exemplo, rand(50,255) retorna um valo entre 50 e 255. Lembre-se de que RGB usa valores entre 0 e 255, de forma que um intervalo aleatório de 50 a 255 funciona bem.

Quando os dois parâmetros que definem a largura e a altura são iguais, a imagem resultante é um círculo. Na Lista 6, a largura sempre é maior do que a altura, criando formas ovais horizontais.

Controlar o posicionamento e a forma das elipses fornece diversas opções artísticas. A Figura 6 mostra algumas dessas possibilidades. A face é criada posicionando um círculo laranja. Cada olho consiste em dois círculos: um círculo externo amarelo e um círculo interno azul. O nariz é uma elipse na qual o parâmetro de altura é maior do que o parâmetro de largura.

Figura 6. Sendo Criado com Elipses
Sendo Criado com Elipses

A boca é feita com um arco. Este tutorial não discutiu arcos, mas pode-se verificar Recursos para aprender mais sobre eles. Resumidamente, o arco é criado com imagefilledarc($img, 200, 240, 100, 30, 0, 180, $yellow, IMG_ARC_PIE). Como as elipses, os arcos fornecem a flexibilidade de criar muitas formas.

A Figura 6 inclui dois conjuntos de elipses: três púrpuras alinhadas verticalmente e três azuis alinhadas horizontalmente. Elas ilustram a relação dos parâmetros de largura e altura no grupo de funções imagefilledellipse .

Observe também a borda preta, que pode ser criada configurando a largura para 4 pixels e desenhando um retângulo não preenchido ligeiramente dentro das dimensões da tela. Uma nova função é introduzida aqui: imagesetthickness. Essa função declara a largura das linhas, bordas de retângulos, elipses, etc. imagesetthickness aceita dois parâmetros: o identificador da imagem e a largura, em pixels. A Lista 7 contém o código que produz a imagem na Figura 6.

Listagem 8. Desenhando com elipses
<?php
// file type
header("Content-type: image/png");
// create image
$img = imagecreatetruecolor(400, 400);
// set background to white
imagefill($img,0,0,imagecolorallocate($img, 255, 255, 255));
// set colors
$black = imagecolorallocate($img, 0, 0, 0);
$blue = imagecolorallocate($img, 0, 0, 255);
$purple = imagecolorallocate($img, 204, 33, 255);
$orange = imagecolorallocate($img, 255, 66, 0);
$yellow = imagecolorallocate($img, 255, 255, 0);
// draw a border
imagesetthickness($img,4);
imagerectangle($img, 5,5,395,395,$black);
// draw a face
imagefilledellipse($img, 200,200,200,200,$orange);
imagefilledellipse($img, 160,160,20,20,$yellow); // left eye
imagefilledellipse($img, 160,160,10,10,$blue); // left eye
imagefilledellipse($img, 240,160,20,20,$yellow); // right eye
imagefilledellipse($img, 240,160,10,10,$blue); // right eye
imagefilledellipse($img, 200,200,10,20,$blue);  // nose
imagefilledarc($img, 200, 240, 100, 30, 0, 180, $yellow, IMG_ARC_PIE);
// draw three touching vertical ovals
imagefilledellipse($img, 60,60,20,60,$purple);
imagefilledellipse($img, 80,60,20,60,$purple);
imagefilledellipse($img, 100,60,20,60,$purple);
// draw three touching horizontal ovals
imagefilledellipse($img, 200,330,300,20,$blue);
imagefilledellipse($img, 200,350,300,20,$blue);
imagefilledellipse($img, 200,370,300,20,$blue);
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Entrando na Onda dos Pixels

Um pixel é o único ponto básico na tela. Uma resolução de tela de 1024x768 significa literalmente que há 1.024 pixels para acessar em uma única linha e 768 pixels em uma única coluna. Isso significa que há 1.024 x 768 = 786.432 pixels com os quais trabalhar. (O número que pode ser usado é menor, pois as barras de ferramentas, bordas, etc. da janela do navegador consomem algum espaço.)

A função imagesetpixel configura um pixel para uma cor específica. Os parâmetros são o identificador da imagem, a coordenada x (horizontal), a coordenada y (vertical) e a cor. A linha de código imagesetpixel($img, 700, 550, $blue) configura o pixel no local 700, 500 para azul. Observe que as coordenadas são baseadas no canto superior esquerdo da janela do navegador, tendo as coordenadas 0,0.

A Figura 7 mostra um padrão interessado feito a partir de configurações de 100.000 pixels. Usando fórmulas matemáticas faz com que os pixels sejam colocados de maneira que a forma aparece. Alterar a matemática produziria uma forma diferente.

Figura 7. Pixels Configurados em Padrões
Sendo criativo com elipses

A Listagem 9 contém o código usado para produzir a Figura 7. É usado um loop que itera 100.000 vezes em conjunto com diversos pontos de plot na array $pixels . A variável $a seleciona aleatoriamente pontos dos três elementos da array.

Listagem 9. Trabalhando com pixels
<?php
// image type
header('Content-Type: image/png');
// create image
$img = imagecreatetruecolor(300, 300);
// create plot arrays
$pixels[0] = array('x' => 100, 'y' =>  10);
$pixels[1] = array('x' =>   0, 'y' => 190);
$pixels[2] = array('x' => 300, 'y' => 240);
// set color
$blue = imagecolorallocate($img, 0, 0, 255);
// draw 100,000 pixels, thereby creating a shape
for ($i = 0; $i<100000; $i++) {
  imagesetpixel($img, round($x),round($y), $blue);
  $a = rand(0, 2);
  $x = ($x + $pixels[$a]['x']) / 2;
  $y = ($y + $pixels[$a]['y']) / 2;
}
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Uma Olhada nas Linhas

Linhas são retas por natureza, mas muitas linhas pequenas, cada uma a um ângulo da anterior, combinam-se para criar uma linha mais longa não reta. Ainda trabalhando com matemática e um loop, a Figura 8 mostra uma onda senoidal contínua montada a partir de linhas menores.

Figura 8. Organizando Linhas em uma Onda Senoidal
Organizando Linhas em uma Onda Senoidal

A Lista 9 mostra o código para criar a onda senoidal. A função imageLine faz o trabalho plotando centenas de pequenas linhas, cujos ângulos são determinados pela função sin .

Listagem 10. Desenhando linhas
<?php
// file type
header ("Content-type: image/png");
// create image
$img = @imagecreatetruecolor(480, 480);
$yellow = imagecolorallocate($img, 255, 255, 33);
// fill array with coordinates
$points = array();
for ($i=1; $i<480; $i=$i+1) {
   $x = $i;
   $y = 150*sin($x/100)*sin($x/5);
   $points[] = $x;
   $points[] = 240-$y;
}
$totalPoints = count($points)/2;
for ($i=0; $i<$totalPoints-1; $i++) {
   imageLine($img, $points[2*$i], $points[1+2*$i],
   $points[2+2*$i], $points[3+2*$i], $yellow);
}
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

A função imageLine usa seis parâmetros:

  • O identificador da imagem
  • As coordenadas x e y iniciais da linha
  • As coordenadas x e y finais da linha
  • A cor

Observe que a diferença entre as coordenadas iniciais e as coordenadas finais determina o comprimento de uma linha. No entanto, o relacionamento de todos os quatro parâmetros das coordenadas deve ser levado em consideração para determinar o comprimento. Por exemplo, a linha que começa em 100,50 e termina em 200,50 tem um comprimento de 100 pixels. Isso é fácil de determinar, pois o valor y é o mesmo nos conjuntos de coordenadas iniciais e finais. Uma linha com parâmetros como 100, 50, 200, 90 é mais longo do que 100 pixels, pois os valores de x e y são alterados. Sempre que isso ocorrer, a linha está a um ângulo, tendo algum grau de posicionamento diagonal.

A Figura 9 mostra outra maneira que se pode usar desenho de linha. Neste caso, as linhas individuais são fáceis de ver.

Figura 9. Usando Linhas para Criar um Efeito de Raio
Usando Linhas para Criar um Efeito de Raio

A Listagem 11 mostra o código usado para criar a imagem da Figura 9.

Listagem 11. Linhas mais grossas
<?php
// image type
header ("Content-type: image/png");
// create image
$img=imagecreatetruecolor(500, 500);
// set how thick the lines will be: 2 pixels
imagesetthickness($img, 2);
// draw white lines
for ($i=0;$i<=360;$i=$i+20){
  imageline($img,250,250,360-$i,$i,
  imagecolorallocate($img,255,255,255));
}
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Fique Radiante com uma Matiz

GD não suporta matizes. Mas não importa. Uma solução alternativa será suficiente.

Uma matiz é uma transição suave entre cores. Pode incluir mais complexidade do que isso, como uma transição que se inclina para uma cor sobre a outra. Mas uma mudança suave entre duas cores é o que está buscando.

É possível controlar cores e linhas dinamicamente, portanto, é viável criar um fluxo de uma cor para outra enquanto linhas são alinhadas umas ao lado da outra. Sem nenhum espaço entre as linhas, o grupo parece uma única forma, conforme mostrado abaixo.

Figura 10. Criando uma Transição Suave entre as Cores
Criando uma Transição Suave entre as Cores

A Listagem 12 contém o código usado para criar a matiz. Na verdade, o código cria duas matizes, uma sob a outra. Da parte superior até a parte inferior, o gráfico flui de preto ao vermelho e do vermelho para o púrpura. No meio do código, um loop termina e outro começa. Cada oop cria um efeito de transição.

Listagem 12. Criar uma matiz
<?php
// file type
header("Content-type: image/png");
// create image
$img = imagecreatetruecolor(400, 800);
// set background to white
imagefill($img,0,0,imagecolorallocate($img, 255, 255, 255));
//cycle through colors while drawing lines
for ($i=0;$i<=255;$i++) {
  imageline($img, 10, $i+10, 300, $i+10, imagecolorallocate($img,$i, 0, 0));
}
for ($i=0;$i<=255;$i++) {
  imageline($img, 10, $i+266, 300, $i+266, imagecolorallocate($img, 255, 0, $i));
}
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Um loop que conta de 0 a 255 é aplicado a uma construção RGB. O loop aumenta o primeiro parâmetro, red, de 0 a 255, criando assim uma transição de preto para vermelho. Enquanto que o valor para vermelho está sendo incrementado, o mesmo loop cria linhas sucessivas de cima para baixo.

O segundo loop dá continuidade ao padrão, mas, desta vez, o valor red é deixado em 255 e o valor blue aumenta de 0 a 255. Vermelho e azul criam púrpura. Portanto, púrpura é a cor na direção ao final da transição. O segundo loop coloca linhas onde o primeiro loop terminou.


Simplesmente pelo Efeito

GD tem uma função interessante que permite aplicar efeitos especiais em uma imagem. A função imageconvolution aceita uma array de arrays de parâmetros, um divisor e um valor de deslocamento. O relacionamento desses valores é complexo e fazer experiências com diferentes valores é uma excelente maneira de aprender. Também é possível procurar informações sobre essa função na Web e consultar Recursos para obter informações adicionais sobre como usá-la.

A Figura 11 mostra como fazer uma figura parecer em relevo. Se não conseguir entender, a figura é um gato dormindo em uma pia.

Figura 11. Colocando em Relevo um Gato com a Função imageconvolution
Colocando em Relevo um Gato com a Função imageconvolution

A Listagem 13 mostra o código que pode ser usado para criar esse efeito.

Listagem 13. Aplicando efeitos em imagens
<?php
$img = imagecreatefromjpeg('catnap.jpg');
$emboss = array(array(2, 0, 0), array(0, -1, 0), array(0, 0, -1));
imageconvolution($img, $emboss, 1, 127);
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img)
?>

Texto Ativo

GD contém algumas funções que permitem a funcionar com texto e fontes. A Figura 12 mostra um exemplo, que usa a função rand de PHP para dimensionar, colorir e posicionar a mensagem de forma aleatória. "Good Morning" aparece de forma aleatória graças a um loop que itera 50 vezes.

Figura 12. Um Muito Bom Dia
Um Muito Bom Dia

A Listagem 14 mostra como criar esse efeito de texto. A função imagestring é a casa de força aqui. Possui estes parâmetros:

  • O identificador da imagem
  • Um valor entre 1 e 5 para o tamanho da fonte
  • Dois valores de coordenadas que posicionam o texto
  • A cadeia de caracteres de texto
  • A cor do texto, aqui criada por configurações aleatórias de RGB
Listagem 14. Fazendo maravilhas com o texto
<?php
header("Content-type: image/png");
$img = imagecreate(500, 500);
$white=imagecolorallocate($img, 255, 255, 255);
$blue=imagecolorallocate($img, 0, 0, 255);
for ($i=1;$i<=50;$i++) {
  imagestring($img, rand(1, 5),rand(0, 425),rand(0, 425),"Good Morning",
  imagecolorallocate($img, rand(0, 255), rand(0,255), rand(0, 255)));
}
imagepng($img);
imagedestroy($img)
?>

Mesmo usando apenas uma única função imagestring , diversas possibilidades vem a mente. Uma é aplicar uma cor aleatória para cada letra. Para fazer isso, cada letra pode ser tratada em uma função imagestring separada, colocando o primeiro caractere de forma aleatória e então colocar cada caractere sucessivo alguns pontos à direita.

O próximo exemplo de tratamento de texto cria duas matizes que se deslocam. A Figura 13 mostra um plano de fundo em matiz que vai de branco a preto; com uma camada superior de cadeia de caracteres de texto que vai de preto a branco.

Figura 13. Texto em Matiz sobre um Plano de Fundo em Matiz
Texto em Matiz sobre um Plano de Fundo em Matiz

Conforme demonstrado na Lista 12, cria-se um efeito de matiz usando um loop for para desenhar linhas contínuas, com a cor de cada linha progredindo ligeiramente a partir da anterior. Na Listagem 15, a matiz vai de branco para preto passando por todos os componentes RGB de 0 a 255. Quando a matiz estiver completa, outro loop for faz o ciclo da função imagestring , alterando a cor de preto até branco. (Na verdade, muda para quase branco. O loop termina em um valor igual a 240, em vez de 255, pois o loop segue por incrementos de 20. O próximo valor seria 260, que está além do maior valor possível de 255.)

Listagem 15. Efeito gradiente aplicado ao texto
<?php
// file type
header("Content-type: image/png");
// create image
$img = imagecreatetruecolor(400, 400);
// set background to white
imagefill($img,0,0,imagecolorallocate($img, 255, 255, 255));
//cycle through colors while drawing lines
for ($i=0;$i<=255;$i++) {
  imageline($img, 10, $i+10, 300, $i+10, imagecolorallocate($img,255-$i, 255-$i, 255-$i));
}
// cycle colors while placing text
for ($i=0;$i<=240;$i=$i + 20) {
imagestring($img, 4,100,$i,"Good Afternoon",imagecolorallocate($img, $i,$i,$i));
}
// display image
imagepng($img);
// release image from memory
imagedestroy($img);
?>

Salve suas Criações

Pode-se executar um arquivo PHP e ver a saída a qualquer tempo em seu navegador. Mas e se quiser criar um arquivo gráfico da saída e salvá-lo separadamente?

A Listagem 16 mostra uma variante da Listagem 15. Na Listagem 16, o tipo de arquivo selecionado é JPEG, de forma que o arquivo salvo resultante é desse tipo. O que permite salvar a saída é dar à função imagejpeg um nome de arquivo (ou um caminho e nome de arquivo). Aqui, a saída é salva como myartwork.jpg. A saída é a mesma que na Figura 13.

Listagem 16. Salvando uma imagem criada
<?php
// file type
header("Content-type: image/jpeg");
// create image
$img = imagecreatetruecolor(400, 400);
// set background to white
imagefill($img,0,0,imagecolorallocate($img, 255, 255, 255));
//cycle through colors while drawing lines
for ($i=0;$i<=255;$i++) {
  imageline($img, 10, $i+10, 300, $i+10, imagecolorallocate($img,255-$i, 255-$i, 255-$i));
}
// cycle colors while placing text
for ($i=0;$i<=240;$i=$i + 20) {
  imagestring($img, 4,100,$i,"Good Afternoon",imagecolorallocate($img, $i,$i,$i));
}
// remove file if it is already there
if (file_exists("myartwork.jpg")) {
 unlink ("myartwork.jpg");
}
// save the image as a jpeg
imagejpeg($img, "myartwork.jpg");
// release image from memory
imagedestroy($img);
?>

Trabalhar com Gráficos Existentes

Até agora, este tutorial mostrou como criar gráficos vetoriais. Agora chegou a hora de ficar a manipulação de um arquivo existente. Neste caso, um JPEG. O JPEG deve estar em seu servidor da Web para trabalhar com ele. Isso será feito de forma divertida — em vez de colocar um arquivo no servidor, usará um formulário HTML para fazer upload do arquivo. Quando o tipo de entrada em um formulário é um arquivo, um recurso de procura está disponível que permite localizar um arquivo em seu computador para upload. A Figura 14 mostra a página da Web que contém esse recurso. Essa página pode ser usada para obter o arquivo e posteriormente manipulá-lo. Para o propósito de upload do arquivo, a parte superior da página é o foco.

Figura 14. Usando um Formulário para Fazer Upload de um Arquivo
Usando um Formulário para Fazer Upload de um Arquivo

A Figura 14 mostra que um arquivo já foi selecionado com o recurso Procurar. Clique no botão Upload para copiar o arquivo para o servidor. Isso pode levar um ou dois minutos, dependendo do tamanho do arquivo e da velocidade de sua conexão. O código, neste caso, limita o tamanho do arquivo para 2 milhões de bytes. Além disso, é possível fazer upload somente de arquivos JPG ou GIF. A Listagem 17 mostra o código para a página da Web.

Listagem 17. Uma página da Web para fazer upload e alterar figuras: Nomeie este arquivo form1.php
<html>
<head><title>GD and Photos</title></head>
<body>
<table Width="85%">
<tr>
<td width="5%"></td>
<td><h3>Upload a photo:</h3>
Use the Browse button to find your picture file on your computer.
<br />Then click the Upload button.
<br />The file must be either a JPEG (.jpg) or a GIF (.gif).
<br />The file must be less than 2,000,000 bytes.<br /><br /></td>
</tr>
<?php
if ($_REQUEST['Error']=="true") {
echo '<tr>';
echo '<td width="5%"></td>';
echo '<td><b>The file you just uploaded was either ';
echo 'too large or the wrong type of file. The file must be a ';
echo '.jpg or a .gif; and be smaller than 2,000,000 bytes.</b>';
echo '</td></tr>';
}
?>
<tr><td> </td>
<td>
<form enctype="multipart/form-data" action="pixupload.php" method="POST">
   <!-- MAX_FILE_SIZE must precede the file input field -->
   <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
   <!-- Name of input element determines name in $_FILES array -->
   Upload this file:<br /><input size="40" id="userfile" name="userfile"
   type="file" accept="image/gif, image/jpeg" />
   <input type="submit" value="Upload" />
</form>
<hr />
<h3>Change a photo:</h3>
</td></tr>
<tr><td> </td><td><img src="myphoto.jpg" /></td></tr>
<tr><td> </td><td>
<form name="process"  id="process" action="processphoto.php">
Rotation:  
<select id="rotation" name="rotation">
<option value="0">None</option>
<option value="90">90 degrees</option>
<option value="180">180 degrees</option>
<option value="270">270 degrees</option>
</select>
<br />
Resizing:  
<select id="resize" name="resize">
<option value="100">100px</option>
<option value="200">200px</option>
<option value="300">300px</option>
</select>
<br /><br />
<input type="submit" value="Process Photo" /></form>
</td></tr>
</table>
</body>
</html>

No código, a linha a seguir limita o tamanho do arquivo: <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />. O atributo accept do elemento input limita o tipo de arquivo: <input size="40" id="userfile" name="userfile" type="file" accept="image/gif, image/jpeg" />. Após o arquivo ser transferido por upload, aparece na página.

Figura 15. A Figura Transferida por Upload Aparece na Página
A Figura Transferida por Upload Aparece na Página

A Listagem 18 mostra o código do servidor que processa i arquivo transferido por upload. Esse procedimento verifica o tipo de arquivo, redimensiona a imagem e salva o arquivo. No final, echo Header (Location: form1.php"); redireciona de volta à página com o formulário.

Listagem 18. Código do servidor que processa um arquivo transferido por upload: Nomeie este arquivo pixupload.php
<?php
$bad_ext=="true";
// This is the temporary file created by PHP
$uploadedfile = $_FILES['userfile']['tmp_name'];
//get the extension to determine the file type
$ext=exif_imagetype($uploadedfile);
//IMAGETYPE_GIF
if ($ext==1) {
   // Create an Image from it so we can do the resize
   $src = @imagecreatefromgif($uploadedfile) or die ($errmsg);
   $bad_ext="false";
}
//IMAGETYPE_JPEG
if ($ext==2) {
   // Create an Image from it so we can do the resize
   $src = @imagecreatefromjpeg($uploadedfile) or die ($errmsg);
   $bad_ext="false";
}
if ($bad_ext=="false") {
   // Capture the original size of the uploaded image
   list($width,$height)=@getimagesize($uploadedfile);
   // The image is resized, while keeping the height and width ratio intact
   $newwidth=200;
   $newheight=($height/$width)*200;
   $tmp=@imagecreatetruecolor($newwidth,$newheight);
   // this line resizes the image, copying the original image into $tmp
   imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
   // The resized image is written to disk.
   $filename = $_FILES['userfile']['name'];
   if ($ext==1) {
      imagegif($tmp,$filename,100);
      $newfilename="myphoto.gif";
   }
   if ($ext==2) {
      imagejpeg($tmp,$filename,100);
      $newfilename="myphoto.jpg";
   }
   imagedestroy($src);
   imagedestroy($tmp);
   // remove file if it is already there
   if (file_exists($newfilename)) {
      unlink ($newfilename);
   }
   rename($filename,$newfilename);
   echo header("Location: form1.php");
} else {
   echo header("Location: form1.php?Error=true");
}
?>

Esse código inclui algumas novas funções:

  • exif_imagetype— Retorna o tipo de arquivo
  • imagecopyresampled— Redimensiona a imagem

O processo de upload funciona configurando um nome de arquivo temporário para o arquivo transferido por upload. Posteriormente, a função rename denomina o arquivo myphoto.jpg. Pode-se fazer com que o arquivo transferido por upload retenha seu nome original configurando o novo nome de arquivo para $_FILES['userfile']['name'].

O formulário inclui opções que permitem alterar o tamanho e a rotação da imagem. A Figura 16 mostra que seleções foram feitas para rotacionar a imagem em 90 graus e aumentar o tamanho para 300 pixels.

Figura 16. Preparando para Mudanças na Figura
Preparando para Mudanças na Figura

A Figura 17 mostra o resultado. A imagem agora está de lado e está granulosa porque foi aumentada. Apesar de esse resultado não parecer útil, serve como uma lição ilustrativa.

Figura 17. Uma Figura de Lado e Aumentada
Uma Figura de Lado e Aumentada

A Listagem 19 mostra o código que processa a rotação e o redimensionamento da imagem.

Listagem 19. Código do servidor que redimensiona e gira uma imagem: Nomeie este arquivo processphoto.php
<?php
// File and rotation
$filename = 'myphoto.jpg';
// Content type
header('Content-type: image/jpeg');
// Get new sizes
list($width, $height) = getimagesize($filename);
$newwidth=$_REQUEST['resize'];
$newheight=($height/$width)*$_REQUEST['resize'];
// Load
$dest = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);
// Resize
imagecopyresized($dest,$source,0,0,0,0,$newwidth,$newheight,$width,$height);
imagejpeg($dest, $filename);
$source = imagecreatefromjpeg($filename);
// Rotate
$degrees = $_REQUEST['rotation'];
$rotate = imagerotate($source, $degrees, 0);
// Output
imagejpeg($rotate);
?>

As novas funções a seguir são usadas na Listagem 19:

  • getimagesize— Retorna a largura e a altura de uma imagem.
  • imagecopyresize— Redimensiona uma imagem existente. Seus parâmetros são o arquivo de destino (redimensionado), o arquivo original e quatro coordenadas para indicar quanto do arquivo original deve ser incluído no arquivo redimensionado. Usar somente 0s usa como padrão a imagem inteira. Os últimos quatro parâmetros são os novos atributos de tamanho e os atributos de tamanho originais.
  • imagerotate— Gira uma imagem existente. Seus parâmetros são o arquivo, o grau de rotação e um valor indicando qual cor deve ser usada na área descoberta que pode aparecer quando uma imagem é girada. O valor 0 usa como padrão a cor do plano de fundo.

Mais a Explorar

Diversas funções permitem trabalhar ainda mais com imagens rasterizadas, incluindo:

  • getimagesize— Retorna as dimensões e o tipo de arquivo de uma imagem especificada
  • imagecolorat— Retorna a cor em uma posição coordenada especificada
  • imagecolortransparent— Configura a cor transparente em uma imagem específica; útil com arquivos GIF
  • imagefilter— Aplica diversos efeitos a uma imagem

Pode-se localizar informações sobre essas e todas as outras funções em Web sites dedicados a PHP e à biblioteca GD (consulte Recursos).

Resumo

Este tutorial percorreu as etapas de usar a biblioteca GD para aplicar diversas funções baseadas em gráficos. Use GD para criar gráficos, alterar ilustração existente e aplicar efeitos especiais na ilustração.

Na última contagem, a biblioteca GD incluía pouco mais de 100 funções. Este tutorial forneceu o básico para iniciar. Algumas funções, como imagefilledellipse, imagefilledarc e imageconvolution , abrem a porta para algumas fantásticas possibilidades gráficas. A beleza das funções GD é que elas podem funcionar com variáveis em vez de simplesmente com valores codificados permanentemente. Isso permite aplicar loop e outras construções de programação.

Use GD para criar miniaturas a partir de figuras transferidas por upload, mostrando como um item apareceria em diferentes cores e muito mais. E este tutorial praticamente nem tocou em efeitos de texto. Estude intensamente e coloque em ordem seus entendimentos de GD. Você pode começar a acreditar que é um artista, além de um desenvolvedor.


Download

DescriçãoNomeTamanho
Source codeos-php-graphic-PHPGraphics_code.zip8KB

Recursos

Aprender

  • Para localizar as funções gráficas, verifique a área Documentação em PHP.net.
  • PHPGD.com é um excelente Web site dedicado a ajudá-lo a aprender sobre a biblioteca GD.
  • Visite a biblioteca GD para obter informações adicionais.
  • Visite o World Wide Web Consortium (W3C), onde muitos padrões da Web são criados.
  • W3 Schools é uma fonte para muitas tecnologias, incluindo PHP e outros interesses da Web.
  • Tek-Tips.com é um comitê de fórum entre colegas. Faça uma pergunta, obtenha uma resposta.
  • Leia comentários sobre a função imageconvolution para começar a usá-la.
  • O developerWorks já cobriu a criação de gráficos com PHP antes. Para aprender técnicas diferentes ou anteriores em gráficos PHP, consulte os seguintes artigos e tutoriais:
  • PHP.net é o recurso central para desenvolvedores de PHP.
  • Consulte aRecommended PHP reading list."
  • Procure todo o conteúdo de PHP no developerWorks.
  • Expanda suas qualificações em PHP verificando, no IBM developerWorks, PHP project resources.
  • Para ouvir entrevistas e discussões interessantes para desenvolvedores de software, consulte podcasts do developerWorks.
  • Usando um banco de dados com PHP? Verifique o Zend Core for IBM, um ambiente de desenvolvimento e produção de PHP pronto, transparente e de fácil instalação que suporta o IBM DB2 V9.
  • Permaneça atualizado com eventos técnicos e webcasts do developerWorks.
  • Verifique as conferências, feiras, webcasts e outros Eventos futuros no mundo que sejam de interesse de desenvolvedores de software livre da IBM.
  • Visite Zona de Software Livre do developerWorks para obter informações extensivas sobre como fazer as coisas, ferramentas e atualizações de projetos para ajudá-lo a desenvolver tecnologias de software livre e usá-las com produtos IBM.
  • Assista e aprenda sobre as tecnologias IBM e de software livre e funções de produtos gratuitamente com os demos On Demand gratuitos do developerWorks.

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=397261
ArticleTitle=Ficando Gráfico com PHP
publish-date=07012008