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.
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:
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:
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.