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.854 ]

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

Paginação de resultados com a classe ADODB

Uma introdução à classe ADODB

Dicas simples para dar mais usabilidades aos formulários

Utilizando PEAR

Leitura recomendada

Lista de extensões preferidas para Joomla!

Debian com Apache, PHP4, PHP5 e MySQL

JOOMLA no openSUSE em 10 passos

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

Criando um blog com o CakePHP 2.2.1

  
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