Saltar para o conteúdo

Aplicativos em PHP/Trabalhando em PHP com/Imagens e Gráficos

Origem: Wikilivros, livros abertos por um mundo aberto.

Trabalhando com a biblioteca gráfica GD

[editar | editar código-fonte]

(Se no Windows remover o ponto-e-vírgula ";" da linha "extension=php_gd.dll" do php.ini)


Gerando Thumbnails com GD

Artigo do BOZO no PHPBrasil:

http://phpbrasil.com/articles/article.php/id/1350


Gerando Imagens Dinamicamente

por Luiz Ribeiro

O PHP oferece uma interface ao módulo GD de Thomas Boutell. Usando tal módulo, você pode criar e editar imagens nos formatos JPEG e PNG. O formato GIF já foi aceito, mas como o algoritmo de compressão do GIF (LZW) contém uma patente de posse da Unisys, os desenvolvedores do módulo foram obrigados à retirar o suporte a esse formato nas versões mais recentes.


Bom, para iniciar vou explicar o procedimento para criar uma imagem usando o módulo GD em PHP. Se você não tem esse módulo, você pode fazer o download dele em http://www.boutell.com/gd/. Normalmente a GD acompanha uma instalação completa do PHP.

Para se criar a imagem, será usada a função ImageCreate(), então serão realizadas as alterações na imagem, então será finalizada a imagem usando ImageJpeg(), ImagePng() ou até ImageGif() se a versão do módulo GD for inferior à 1.4.

Bom, vamos ao que interessa. Primeiramente vamos criar uma pequena imagem com o seguinte texto: PHPBrasil. O código ficará da seguinte forma:

<?php
header("Content-type: image/gif"); //Informa ao browser que o arquivo é uma imagem no formato GIF

$imagem = ImageCreate(150,40); //Cria uma imagem com as dimensões 100x20

$vermelho = ImageColorAllocate($imagem, 255, 0, 0); //Cria o segundo plano da imagem e o configura para vermelho
$branco = ImageColorAllocate($imagem, 255, 255, 255); //Cria a cor de primeiro plano da imagem e configura-a para branco

ImageString($imagem, 3, 3, 3, "PHPBrasil", $branco); 
//Imprime na imagem o texto PHPBrasil na cor branca que está na variável $branco

ImageGif($imagem); //Converte a imagem para um GIF e a envia para o browser

ImageDestroy($imagem); //Destrói a memória alocada para a construção da imagem GIF.
?>

Bom, o script está todo comentado e acho que você entendeu. Se alguma dúvida ficar martelando aí, manda um comentário. =D

Bom, neste exemplo usamos a função ImageGif() para converter a imagem, $imagem, e depoisa enviamos ao navegador. Mas poderíamos ter salvo esta imagem em um arquivo, ao invés de mostrar ela no navegador. Veja o exemplo:

<?php
$arquivo = "imagem1.gif";

$imagem = ImageCreate(150,40);

$vermelho = ImageColorAllocate($imagem, 255, 0, 0);
$branco = ImageColorAllocate($imagem, 255, 255, 255);

ImageString($imagem, 3, 3, 3, "PHPBrasil", $branco);
ImageGif($imagem, $arquivo);

ImageDestroy($imagem);

echo "A imagem foi salva no arquivo $arquivo.";
?>

Como você deve ter notado, apenas retiramos aquele header() (que informava ao browser que o arquivo era uma imagem), afinal este exemplo não irá mostrar a imagem no navegador e sim gravar ela em $arquivo, e também mudamos os parâmetros da função ImageGif() para salvar a imagem no arquivo.

Nesta parte do artigo, irei explicar como desenhar retângulos, polígonos e arcos.


Desenhando retângulos

Vamos ao primeiro exemplo, que irá desenhar um simples retângulo preenchido usando GD (o formato da imagem a seguir é PNG).

<?php
header("Content-type: image/png");
$imagem = ImageCreate(100, 20);
$branco = ImageColorAllocate($imagem, 255, 255, 255);
$azul = ImageColorAllocate($imagem, 20, 93, 233);
ImageFilledRectangle($imagem, 5, 10, 60, 14, $azul);
ImagePng($imagem);
ImageDestroy($imagem);
?>

Bom, neste exemplo só há uma função nova, a função ImageFilledRectangle() que como seu próprio nome diz é uma função que cria um retângulo com as dimensões e posição informadas, e na cor azul, que foi definida na variável $azul.

Já para criar um retângulo sem preenchimento você simplesmente irá trocar a função ImageFilledRectangle() por ImageRectangle(). O exemplo ficará da seguinte forma:

<?php
header("Content-type: image/png");
$imagem = ImageCreate(100, 20);
$branco = ImageColorAllocate($imagem, 255, 255, 255);
$azul = ImageColorAllocate($imagem, 20, 93, 233);
ImageRectangle($imagem, 5, 10, 60, 14, $azul);
ImagePng($imagem);
ImageDestroy($imagem);
?>

Como foi dito, este exemplo irá criar uma imagem com um retângulo sem preenchimento, mas sua borda terá a cor $azul.

Desenhando polígonos

Para desenhar polígonos, vamos usar a função ImagePolygon(), que irá criar um polígono sem preenchimento, e a função ImageFilledPolygon() que irá desenhar um polígono com preenchimento.

Em nosso primeiro exemplo, vamos desenhar um polígono com vértices de (12, 10), (15, 20), (50, 17) e (70, 10) com uma borda de azul-claro:

<?php
header("Content-type: image/png");
$imagem = ImageCreate(100, 20);
$branco = ImageColorAllocate($imagem, 255, 255, 255);
$azul = ImageColorAllocate($imagem, 20, 93, 233);
$pontos = array(12, 10, 15, 20, 50, 17, 70, 10);
ImagePolygon($imagem, $pontos, 4, $azul);
ImagePng($imagem);
ImageDestroy($imagem);
?>

Bom, agora vamos criar um polígono preenchido, você já deve ter pensado que o código será o mesmo, mas ao invés de ImagePolygon() usaremos ImageFilledPolygon(), se você énsou isso, acertou em cheio. Vamos ver como ficaria nossa imagem com um retângulo preenchido:

<?php
header("Content-type: image/png");
$imagem = ImageCreate(100, 20);
$branco = ImageColorAllocate($imagem, 255, 255, 255);
$azul = ImageColorAllocate($imagem, 20, 93, 233);
$pontos = array(12, 10, 15, 20, 50, 17, 70, 10);
ImageFilledPolygon($imagem, $pontos, 4, $azul);
ImagePng($imagem);
ImageDestroy($imagem);
?>

Desenhando arcos

Bom, agora vamos desenhar alguns arcos em nossas imagens, para isso vamos usar a função ImageArc(). Antes de começarmos, vou passar a sintaxe da função:


int ImageArc(int im, int cx, int cy, int w, int h, int s, int e, int co1);


Esta função desenha um arco em uma imagem, im, com uma posição inicial de X de cx e uma posição inicial Y de cy. O arco é de largura w e altura h, com um ângulo inicial de s e um ângulo final de e, tudo na cor co1.

Agora que já entendemos a função ImageArc() vamos ao nosso primeiro exemplo que irá desenhar uma elipse:

<?php
header("Content-type: image/gif");
$imagem = ImageCreate(500, 100);
$branco = ImageColorAllocate($imagem, 255, 255, 255);
ImageColorTransparent($imagem, $branco);
$vermelho = ImageColorAllocate($imagem, 20, 93, 233);
ImageArc($imagem, 40, 50, 50, 40, 0, 360, $vermelho);
ImageGif($imagem);
ImageDestroy($imagem);
?>

O código acima funciona, pois para ter uma elipse, você precisa de uma diferença de 360 graus entre a posição inicial e a posição final. Aplicando esse conhecimento, também podemos desenhar um círculo preenchido usando a função ImageFillToBorder(). (Note que isso é um círculo, não uma elipse, porque os parâmetros de largura e altura têm o mesmo valor.)

<?php
header("Content-type: image/gif");
$imagem = ImageCreate(500, 100);
$branco = ImageColorAllocate($imagem, 255, 255, 255);
ImageColorTransparent($imagem, $branco);
$vermelho = ImageColorAllocate($imagem, 20, 93, 233);
ImageArc($imagem, 40, 50, 50, 50, 0, 360, $vermelho);
ImageFillToBorder($imagem, 50, 40, $vermelho);
ImageGif($imagem);
ImageDestroy($imagem);
?>

Observação: os exemplos acima foram retirados do livro PHP: Guia do Desenvolvedor que está na lista de livros recomendados da PHPBrasil. Nos exemplos só foram alterados os nomes de algumas variáveis para facilitar a compreensão.

Bom, esse é o básico do módulo GD. Você com certeza tem muito a explorar ainda, em breve vou trazer mais alguns artigos sobre o assunto, para os que se interessaram, ou não entenderam alguma função podem ver no manual do PHP todas as funções de imagem: http://br.php.net/manual/pt_BR/ref.image.php


Gerando Gráficos em PHP com a Biblioteca JPGraph

O que é a JpGrapf?

A JpGraph é uma biblioteca orientada a objetos de criação de gráficos, inteiramente escrita em PHP, que tem como base a extensão GD2 ou GD1 que acompanha o PHP.

Pode ser utilizada para criar diversos tipos de gráficos, de maneira fácil e escrevendo um mínimo de código. Quando aliada a bancos de dados torna os gráficos ainda mais interessantes.

Requisitos

Apache (http://httpd.apache.org )

PHP (www.php.net )

JpGraph (http://www.aditus.nu/jpgraph/ )

Parâmetros de Compilação

- Compilar o PHP com suporte a GD e às fontes TTF (Linux):

Sugestão da documentação oficial da JpGrapf:

./configure --prefix=/usr/share \
--datadir=/usr/share/php \
--with-apxs=/usr/sbin/apxs \
--libdir=/usr/share \
--includedir=/usr/include \
--bindir=/usr/bin \
--with-config-file-path=/etc \
--enable-mbstring --enable-mbregex \
--with-pdflib=/usr \
--with-mysql  \
--with-ttf-dir=/usr/lib \
--with-freetype-dir=/usr/lib \
--with-gd --enable-gd-imgstrttf --enable-gd-native-ttf \
--with-zlib-dir=/usr/lib \
--with-png-dir=/usr/lib --with-jpeg-dir=/usr/lib --with-xpm-dir=/usr/X11R6 \
--with-tiff-dir=/usr/lib \
--enable-ftp \
--enable-memory-limit --enable-safe-mode \
--bindir=/usr/bin \
--enable-bcmath -enable-calendar \
--enable-ctype --with-ftp \
--enable-magic-quotes \
--enable-inline-optimization \
--with-bz2 \
--with-iconv

- No Windows basta descomentar no php.ini o suporte à GD2.

Obs.: No código de um gráfico não pode haver nenhuma saída em HTML ou texto.


Captura do site oficial.

Versões

Para PHP4 é indicada a versão 1.19 da JpGrapf e para a versão 5 do PHP é indicada a versão 2.0 beta.

Download das Fontes TTF (Linux)

http://corefonts.sourceforge.net/

http://www.gnome.org/fonts/

Como saber se o PHP já tem o suporte à JpGrapf?


Executar a função phpinfo(), que deve retornar:

- GD support - enabled

- FreeTypeSupport – enabled

- JPG support – enabled

- PNG support – enabled

- WBMP support – enabled

Exemplos que podem ser encontrados no site official em

http://www.aditus.nu/jpgraph/pdf/jpgraphddda.pdf


Exemplos de Gráficos

Gráfico dos Poços perfurados pelo DNOCS de 1900 a 1999, por estado:



Este gráfico acessa um banco PostgreSQL. Num pequeno form alguém informa um ano entre 1900 e 1999 e recebe o gráfico correspondente. Caso não informe o ano retornará o gráfico de todos os anos.

Código abaixo:

//Pequneo form de consulta
<h2 align=center>Consulta de Poços - DNOCS</h2>
<form name=frmPocos action="barras_pocos.php" method="post">
<center>Que ano que deseja Consultar? (Todos = vazio)<input name="ano" size=10>
<input type=submit value=Consultar></center>
</form>

//Arquivo barras_pocos.php
<?php 
// Inclusão da biblioteca
include ("jpgraph.php");    
include ("jpgraph_bar.php"); 
// Conexão ao banco PostgreSQL e consulta
$db = pg_connect("host=10.0.0.100 dbname=banco port=5432 user=user password=pass") or die(pg_last_error()); 
$ano=$_POST['ano'];
// Se não for informado o ano da pesquisa no form anterior, exibirá todos os poços, caso contrário mostra
// somente os poços do ano solicitado
if ($ano == "")
$sql=pg_query($db,"SELECT estado, count(poco) as quant from recursos_hidricos.pocos group by estado");
else
$sql=pg_query($db,"SELECT estado, count(poco) as quant from recursos_hidricos.pocos where 
recursos_hidricos.pocos.ano = $ano group by estado");

while($row = pg_fetch_array($sql)) { 
$quant[] = $row[1]; 	//Este array ($quant[]) sera usado em um dos eixos
$estado[] = $row[0];   // Este em outro eixo
} 
// Construção da base do gráfico
$graph = new Graph(650,350,"auto"); 
$graph->SetScale("textint"); //Exibir as escalas 
$graph->img->SetMargin(50,50,70,50);  //Margens dos 4 lados
$graph->title->Set('DNOCS - Poços X Estado do ano de '.$ano); // Título do gráfico
$graph->title->SetFont(FF_VERDANA, FS_BOLD, 16);//Fonte do título
$graph->AdjBackgroundImage(0.4,0.7,-1); //Tipo de background
$graph->xaxis->title->Set('Estados'); //Título do eixo X
$graph->xaxis->SetLabelAngle(30); //Ângulo dos labels do eixo X
$graph->xaxis->SetTickLabels('Estados'); 
$graph->xaxis->SetFont(FF_VERDANA, FS_BOLD);//Fonte para o título do eixo X
$graph->xaxis->SetTickLabels($estado);  // Recebe o array dos estados do banco
$graph->yaxis->title->Set('Poços'); 
$graph->yaxis->SetFont(FF_FONT1, FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1, FS_BOLD);
$graph->SetShadow(); //Adicionar sombra ao gráfico

//Adicionar um tipo de gráfico (barras)
$bplot = new BarPlot($quant);  //Recebe o outro array do banco
$bplot->SetFillColor("lightgreen"); // Cor do gráfico 
$bplot->value->Show(); 
$bplot->value->SetFont(FF_ARIAL,FS_BOLD); //Fonte
$bplot->value->SetAngle(45); //Ângulo
$bplot->value->SetColor("black","navy"); //Cores

$graph->Add($bplot); //Adicionar o gráfico à base
$graph->Stroke(); 
?> 

Ao baixar a JpGraph e descompactar no diretório web, veja a documentação, que exibe inúmeros tipos de gráficos com seus respectivos códigos ao lado, como também o subdiretório samples que tem 337 exemplos de gráficos.


Referência

http://www.phpbrasil.com/articles/print.php/id/164

http://www.zend.com/zend/tut/tutsweat3.php (ótimo tutorial, em inglês)

http://phpbrasil.com/articles/print.php/id/315 (outro muito bom e em português)

http://www.phpfreaks.com/print.php?cmd=tutorial&tut_id=115 (este abordando uso do MySQL)