Adicionando texto em imagens em tempo real

Com o uso de PHP e a biblioteca GD, a manipulação de imagens, editando e inclusive inserindo textos antes de apresetar a imagem ao usuário se torna uma tarefa simples. Como estes dias tive de recorrer a este recurso para gerar cupons “on the fly” no site ComuniWEB, decidi escrever um artigo mostrando como isso é possível e apresentando a simplicidade da tarefa.

Primeiros passos

Atenção: Verifique se a biblioteca GD esta instalada no phpinfo(); Existem algumas formas de exibir o resultado de uma operação como esta, por exemplo:

  • salvar o arquivo em disco
  • apresentar na tela (como imagem, dentro do HTML)
  • apresentar na tela (somente imagem)

Neste exemplo vamos apresentar o arquivo como uma imagem, embutida no HTML como qualquer outra, para isso precisamos entender a seguinte estrutura. Geralmente uma tag do tipo “” aponta para um arquivo “.jpg” ou “.gif”, mas neste caso iremos apontar ela para um arquivo “.php” que irá retornar os dados como se fosse uma imagem sendo lida.

Com isso vamos ter a seguinte estrutura, dois arquivos, um chamado main.php e um chamado imagem.php. O arquivo main.php irá apresentar o HTML e mostrar a imagem, o arquivo imagem.php será o real responsável por buscar uma imagem e inserir texto nela, neste caso criamos mais um arquivo img.jpg para servir de exemplo.

main.php

Este arquivo é bem simples e direto, HTML com uma imagem, apenas um detalhe importante, no nome da imagem vamos passar um valor por GET com o texto que será escrito na imagem: ```html Veja abaixo seu certificado


**imagem.php**

Aqui começa a mágica, este arquivo deve recuperar a imagem original, o texto enviado e fazer a junção dos dois, então, vou explicar o processo passo a passo.

O primeiro passo é carregar a imagem em um recurso do PHP, basicamente carregar a imagem na memória. Para isso o PHP possui diversas funções dependendo do formato da imagem, [ImageCreateFromJPEG](http://br2.php.net/manual/pt_BR/function.imagecreatefromjpeg.php), [imageCreateFromGIF](http://br2.php.net/manual/pt_BR/function.imagecreatefromgif.php), etc...

```php
$rImg = ImageCreateFromJPEG("ex-img.jpg");

Agora para a escrita temos que preparar alguns dados para a escrita. Existem duas formas de escrever em uma imagem, caracter por caracter ou uma string completa (imagechar ou imagestring ). Neste caso vamos usar a função para strings, mas ambas recebem os mesmo valores, variando apenas o texto a ser escrito. Antes de chamar a função devemos ter pronto a cor com o qual será escrito o texto.

ara isso devemos usar a função imagecolorallocate que recebe como valores o ponteiro da imagem e a cor, em três parametros separados no formato RGB. Neste caso usamos preto:

$cor = imagecolorallocate($rImg, 0, 0, 0);

Agora sim podemos efetuar a escrita. A função imagestring recebe estes parametros, nesta ordem:

  • imagem: o ponteiro da imagem
  • font: um valor inteiro, de 1 a 5 (fonte padrão, quanto maior o número, maior a fonte) ou uma fonte de sistema
  • x: deslocamento horizontal (coordenada)
  • y: deslocamento vertical (coordenada)
  • string: texto que será escrito
  • color: variável com a cor definida anteriormente

Vale lembrar que x e y estão em relação ao topo esquerdo da imagem. Em relação a fonte, neste exemplo iremos utilizar a fonte padrão do PHP, mas geralmente é possivel utilizar qualquer fonte tty, vou descrever um pouco mais no final do artigo.

Esta é nossa imagem de base:

Vou escrever meu nome no local reservado, com isso levando em conta a posição (remova 2 a 3 pixels do topo de overhead da fonte), e o fato de que devo decodificar o texto com urldecode, o resultado final da função é este:

imagestring($rImg,5,126,22,urldecode($\_GET\['nome'\]),$cor);

Antes de finalizar o arquivo devemos definir o header indicando que estamos echoando uma imagem do tipo JPG e após isso podemos usar a função imageJPEG que intrui o PHP a jogar o código da imagem para a tela, existe a opção de passar um segundo parametro que indica o nome do arquivo que deve ser gerado.

header('Content-type: image/jpeg'); imagejpeg($rImg); 

Este é o resultado final:

E este o código completo: ```php < ?php

//Carregar imagem $rImg = ImageCreateFromJPEG(“ex-img.jpg”);

//Definir cor $cor = imagecolorallocate($rImg, 0, 0, 0);

//Escrever nome imagestring($rImg,5,126,22,urldecode($_GET[’nome’]),$cor);

//Header e output header(‘Content-type: image/jpeg’); imagejpeg($rImg,NULL,100);

?>


**Utilizando fontes personalizadas**

Temos a oportunidade de utilizar fontes personalizadas, Arial, Verdana, ou funções mais exóticas como Futura ou outras que não estão geralmente localizadas em qualquer sistema. Para utilizar fontes TrueType, podemos utilizar a função [imagettftext](http://br2.php.net/manual/pt_BR/function.imagettftext.php), que nos permite apontar para o arquivo .ttf da fonte que deverá ser usada, como demostrado abaixo:

```php
$font = 'arial.ttf'; imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
comments powered by Disqus

Related Posts

ZendCon 08: Day 4

ZendCon 08: Day 4

  • September 19, 2008

That’s it, time running out and the sun comes out again for Day 4 of ZendCon.

Read More
Google Maps API: Um exemplo prático e comentado

Google Maps API: Um exemplo prático e comentado

  • December 6, 2006

Esta semana montei um serviço bem simples para poder testar o uso da API do Google Maps. O serviço foi oferecido aos congressistas do evento PHP Conference Brasil 2006 e era bem simples: cada um entrava e deixava marcado seu ponto de origem, com isso obteríamos um mapa demonstrando de onde os participantes vieram e quantos kilometros viajaram.

Ainda restam aplicar algumas funções à este serviço, mas ele serviu como meu teste inicial. Resolvi então abrir o código fonte e o fluxo de dados do serviço para que vocês possam conhecer e quem sabe começar utilizar a Google Maps API também.

Read More
AJAX: What is it?

AJAX: What is it?

  • October 12, 2006

Author’s note: This article was first published in my AJAX Column (AjaxOnline.com.br ) in Portuguese where my intended audience is a group of beginners learning about the AJAX initiative. Since it turned out to be a really interesting article I decided to translate it and share it with a wider audience.

I wondered where I should begin explaining AJAX and finally decided I should begin explaining what’s behind it and how it came around, so everyone knows where we are coming from.

Ajax, web 2.0, RSS, if you’ve never heard any of these terms than something is wrong, you are either way behind in web technologies or not serious enough about web development. The concept of Web 2.0 is what we may call the “father” of the latest trends in web applications, where various technologies are used to improve the user’s experience, but what is the concept?

Read More