• Adicionando texto em imagens em tempo real

    by  • June 18, 2007 • Pessoal/Off-topic

    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 “<img>” 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:

    Veja abaixo seu certificado
    
    <img src="imagem.php?nome=Rafael%20Dohms" />
    

    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, imageCreateFromGIF, etc…

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

    &lt; ?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);
    
    ?&gt;

    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, que nos permite apontar para o arquivo .ttf da fonte que deverá ser usada, como demostrado abaixo:

    $font = 'arial.ttf';
    imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

    About

    Rafael Dohms is a PHP Evangelist, Speaker and contributor. He is a very active member of the PHP Community, having helped create and manage two PHP User Groups in Brazil. He shared the lead of PHPSP for 3 wonderful years making a positive mark on the local market. Developer, gamer and lover of code he also hosts Brazil’s first PHP Podcast: PHPSPCast, as well as contributing to well known projects. He moved to the Netherlands in search of new challenges and is now part of the team at WEBclusive, sharing his passion for quality code and working on new awesome ideas with the team. You can always find him at the nearest Community events, speaking, sharing, talking or just learning from the rest.

    http://doh.ms