Uma introdução à biblioteca GD

A biblioteca GD é um poderoso plugin para o PHP que nos proporciona mexer com imagens. Nesse tutorial criaremos um botão só para dar um noção de como usar essa ferramenta. E tomara que isto sirva de inspiração para sua criação.

[ Hits: 34.849 ]

Por: Pedro César em 18/11/2004


Vamos ao código



O tutorial a seguir usará o formato PNG, as imagens serão criadas dinamicamente. Nessa demonstração estou partindo do pressuposto que sabes pelo menos o básico de PHP. Veja uma parte do código abaixo:

Arquivo: button.php:

<?
$ButtonWidth = 100;
$ButtonHeight = 30;
$ButtonLabel = "Testando";
$ButtonFont = 5;
$image = imagecreate($ButtonWidth, $ButtonHeight);
$colorBody = imagecolorallocate($image, 0x99, 0x99, 0x99);
$colorShadow = imagecolorallocate($image, 0x33, 0x33, 0x33);
$colorHighlight = imagecolorallocate($image, 0xCC, 0xCC, 0xCC);
imagefilledrectangle($image, 1, 1, $ButtonWidth-2, $ButtonHeight-2, $colorBody);
//determinando o tamanho do texto do botão
$ButtonLabelHeight = imagefontheight($ButtonFont);
$ButtonLabelWidth = imagefontwidth($ButtonFont) * strlen($ButtonLabel);
//determinando o canto superior esquerdo
$ButtonLabelX = ($ButtonWidth - $ButtonLabelWidth)/2;
$ButtonLabelY = ($ButtonHeight - $ButtonLabelHeight)/2;
//Desenhando a sombra
imagestring($image, $ButtonFont, $ButtonLabelX+1, $ButtonLabelY+1, 18 - $ButtonLabel, $colorShadow);
//escrevendo o texto na imagem
imagestring($image, $ButtonFont, $ButtonLabelX, $ButtonLabelY, $ButtonLabel, $colorHighlight);
//exibindo a imagem
header("Content-type: image/png");
imagepng($image);
?>


Figura 1 - Saída do código acima

O código é suficientemente curto para um simples botão, para vê-lo você deve visitar diretamente essa página no seu servidor WEB ou chama-la através da tag IMG em outra página, por exemplo:

<img src="www.seuservidor.com/button.php">

Você pode ainda alterar as cores e até mesmo adicionar sombra ao botão, incluindo ou alterando algumas linhas do código. Sugiro uma visita ao site:
para pesquisar a função imagestring() em maiores detalhes, assim como ver outras relacionadas. Vamos ao código, irei explicar cada uma das funções utilizadas:
  • As 4 primeiras linhas configuram os atributos da imagem, 100 pixels de altura com 30 pixels de largura, o texto a ser impresso e a fonte a ser utilizada.

  • A linha 5 é a linha que cria a imagem, o primeiro argumento da função é sua altura e o segundo é sua largura, se você obtiver um erro nesse ponto é provável que a biblioteca GD não esteja corretamente instalada no seu sistema.

  • As linhas 6 a 8, usam a função imagecolorallocate(), para especificar as cores usadas na imagem. O primeiro atributo necessário para essa função é o identificador da imagem (a variável utilizada com a função imagecreate()), os outros 3 atributos são valores hexadecimais de RGB, primeiro o vermelho, segundo o verde e em terceiro o azul. Para conhecer melhor essa função visite:

    http://www.php.net/manual/pt_BR/function.imagecolorallocate.php

  • A linha 9 de nosso código, desenha um retângulo com o identificador da imagem (novamente a variável utilizada na função imagecreate()), a coordenada X inicial, a coordenada Y inicial, a coordenada X final, a coordenada Y final e a cor usada para o preenchimento.

  • As linhas 11 e 12 servem para calcular a altura e a largura do texto que vamos por no botão para podermos centralizá-lo.

  • As linhas 14 e 15 servem para calcularmos as coordenadas de localização do nosso texto.

  • Nas linhas 17 e 18 a função imagestring(), escreve o texto (ou uma string qualquer) na imagem, nesse caso escrevemos duas vezes com uma diferença pequena nas coordenadas para dar um efeito de sombra.

  • A linha 22 diz ao browser que esse arquivo é uma imagem e ele deve apresenta-lo como tal. Alguns browser antigos têm alguma deficiência em mostrar imagens PNG, mas todos os atuais exibem esse tipo de imagem corretamente (exceto se a imagem tiver transparência, pois esse recurso do PNG é ignorado pelo IE. Testei apenas com o Firefox e ele exibe a transparência perfeitamente).

  • Finalmente na linha 23 vamos enviar a ordem para o browser exibir a imagem criada, para isso usamos a função imagepng().

Este artigo é uma compilação de material e idéias extraído da web, com adaptações e traduções por mim feitas. Assim, os códigos e idéias gerais nem sempre foram integralmente por mim criados. Não é sensato "reinventar a roda", no entanto é menos sensato ainda e até deselegante se apropriar de criações alheias e colocá-las como suas.

Assim, procuro sempre, citar a fonte de onde tirei as idéias:
No entanto, se você detectar alguma matéria que por um acaso deixei de citar o devido crédito, por favor, entre em contato, para citarmos a fonte ou retirar do artigo se for o caso.

Página anterior    

Páginas do artigo
   1. Entendendo o que é GD
   2. Vamos ao código
Outros artigos deste autor

Uma introdução à classe ADODB

Dicas simples para dar mais usabilidades aos formulários

Utilizando PEAR

Paginação de resultados com a classe ADODB

Leitura recomendada

Criando um blog com o CakePHP 2.2.1

Lista de extensões preferidas para Joomla!

Gráficos em PHP Highcharts

Instalação do MediaWiki em uma Project web do SourceForge

Ninguém planeja fracassar, mas muitos fracassam por não planejar

  
Comentários
[1] Comentário enviado por removido em 19/11/2004 - 01:20h

10!!!!!!!!!!!!!!!!!!!!!!!!!!


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts