En ocasiones, se puede presentar la necesidad de introducir en nuestros proyectos una imagen cuyo contenido sea un texto, y sobre todo necesitamos integrarlo dentro de nuestro contenido, intentando que no se note que es una imagen, a no se que seleccionen el contenido para copiarlo.
Una de las principales utilidades de esto es evitar el SPAM al escribir nuestra dirección de e-mail en una web. Muchos clientes prefieren enviar un e-mail en lugar de utilizar un formulario de contacto y tenemos que satisfacerles, sin arriesgar la seguridad de nuestro sistema, en el sentido de que hay cientos de motores que se dedican a rastrear webs en busca de direcciones de e-mail (lo cual es muy sencillo de hacer con expresiones regulares, por ejemplo).
Tenemos que estudiar bien cómo hacemos el script, ya que la entrada de datos es esencial. Sería improductivo hacer un script cuya llamada fuera:
1 | <img src="scriptGenerador.php?texto=midireccion@miservidor.com" /> |
Ya que un motor se enteraría de que eso es una dirección de correo igualmente. Por lo que yo sugiero algunas opciones:
- Para simplificar, podemos codificar el texto, por ejemplo, en base 64, el e-mail anterior quedaría así:bWlkaXJlY2Npb25AbWlzZXJ2aWRvci5jb20 y sería más complicado de detectar, aunque es nuestra responsabilidad hacer la conversión. Además, si en cualquier momento queremos identificar el texto que pusimos, en cierto punto del código debemos hacer la conversión inversa. Por otra parte, aunque es difícil que algún motor se dedique a convertir el texto en base64 a binario de nuevo, es posible.
- Otra posibilidad es, si sólo vamos a escribir un sólo texto de esta forma, implantarlo dentro del archivo php que genera la imagen, como una variable del propio código, así no debemos escribir nada cuando llamemos al script. Si tenemos que cambiar el texto, basta con editar el script
- Si, por el contrario, vamos a escribir varios mensajes, podemos asignar una clave a cada uno, por ejemplo, un número o una cadena de texto corta, y en nuestro script hacer corresponder ese número con el texto en cuestión.
Aquí vamos a hacer un ejemplo de la tercera opción. Aunque podemos extender el ejemplo usando bases de datos (si tenemos que introducir muchos mensajes, o muchas direcciones de e-mail diferentes), aquí vamos a crear un array en PHP para hacer corresponder la clave introducida con el valor (el texto que de verdad escribimos).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?php // Con esta función calculamos la anchura, altura del texto y dónde está la baseline de nuestro texto // con el tipo de letra seleccionado. function dimensions($ldef, $texto) { // Calcular el ancho $box=imagettfbbox ($ldef['size'], 0, $ldef['font'], $texto); $width = abs(abs($box[2]) - abs($box[0])); // Calcular el alto y la baseline $box=imagettfbbox ($ldef['size'], 0, $ldef['font'], 'ILyjgq'); // Tiene caracteres que no terminan en la baseline $height = abs($box[7] - $box[1]); $baseline = abs($box[5]); return array($width, $height, $baseline); } // Definimos un array con los posibles textos que vamos a presentar $textArray=array("ejemplo", "de un fragmento de texto", 'gaspy@mi_servidor.com'); // Definimos el tipo de letra y el tamaño $letra = array ('font' => './LinLibertine_Bd.ttf', 'size' => 12, 'color' => array(0,0,0), ); // Definimos el texto a presentar $textID = (isset($_GET['texto']))?$_GET['texto']:0; $text = $textArray[$textID]; header('Content-Type: image/png'); // Creamos la imagen, calculando primero sus dimensiones dependiendo del tamaño del texto $box_size=dimensions($letra, $text); $im = imagecreatetruecolor($box_size[0], $box_size[1]); // Creamos dos colores, y definimos el color que actuará como transparente $background = imagecolorallocate($im, 255, 255, 255); $fontColor = imagecolorallocate($im, $letra['color'][0], $letra['color'][1], $letra['color'][2]); imagecolortransparent($im, $background); // Ponemos el fondo de la imagen transparente imagefilledrectangle($im, 0, 0, $box_size[0], $box_size[1], $background); // Creamos el texto imagettftext($im, $letra['size'], 0, 0, $box_size[2], $fontColor, $letra['font'], $text); // Generamos la salida imagepng($im); imagedestroy($im); ?> |
Para el ejemplo he utilizado la fuente Linux Libertine Bold cuyo fichero ttf es LinLibertine_Bd.ttf, en realidad podemos utilizar cualquier fuente de la que dispongamos el fichero TTF.
El script que vemos, si lo llamamos desde el navegador con el parámetro textID=1 mostrará una imagen con el texto «de un fragmento de texto» dibujado dentro con el tipo de letra especificado anteriormente.
Ahora hacemos el siguiente archivo html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ejemplo de texto</title> <style text="text/css"> <!-- @font-face { font-family: "Linux Libertine"; src: url(LinLibertine_Bd.ttf); } body{ background: #eee; font: 12pt Linux Libertine,sans; } .texto{ vertical-align:bottom; margin: 0; padding: 0; } --> </style> <meta name="author" content="Gaspar Fernández"> </head> <body> <h1>Ejemplo de texto</h1> Esto es un ejemplo de inserción <img src="texto.php?textID=1" class="texto"/> incluyendo una imagen en PHP <hr> <address> <a href="https://poesiabinaria.net">Gaspar Fernández</a>, </address> </body> </html> |
Con la parte CSS:
1 2 3 4 | @font-face { font-family: "Linux Libertine"; src: url(LinLibertine_Bd.ttf); } |
Estamos definiendo el fichero que se descargará para visualizar el tipo de letra, así nos aseguramos de que sea el mismo tipo de letra (el de la imagen y el de nuestro texto). El resultado debería ser algo parecido a esto:
