Agregar texto a imagen con PHP

En este tutorial sobre imágenes y PHP te mostraré cómo agregar una capa de texto a una imagen, usando cualquier fuente.

Es decir, puedes descargar cualquier fuente o tipografía desde Google fonts (o lugares similares) y usarla para colocar texto en una imagen usando PHP.

Voy a mostrarte varios ejemplos, entre ellos uno para agregar dos líneas de texto. Por cierto, recuerda que necesitas la librería GD habilitada. Yo he probado esto con Windows y Linux, en ambos lugares funciona de maravilla.

Formatos PNG y JPG

Quiero dejar claro que en este ejemplo vamos a trabajar con una imagen PNG y para ello vamos a usar las funciones imagecreatefrompngimagepng.

Si tú usas JPG/JPEG, no hay problema, pero cambia los encabezados que veremos, y las funciones; por ejemplo, el equivalente de imagecreatefrompng para JPG es imagecreatefromjpeg y lo mismo para imagepng.

Colocar texto sobre imagen usando PHP

Colocar texto en imagen con PHP

Comenzamos definiendo la ruta absoluta de la fuente TTF. Como lo dije, puedes usar Google fonts o similares para descargar fuentes. Es importante que la ruta sea absoluta.

También definimos la ruta de la imagen que vamos a modificar, en este caso no es necesario que sea absoluta.

<?php
$rutaFuente = __DIR__ . "/" . "sansita.ttf";
$nombreImagen = "imagen.png";

Yo voy a usar la fuente llamada sansita.ttf que está en el mismo directorio que el script. Después de eso, creamos un recurso a partir de la imagen con imagecreatefrompng. Definimos el color del texto, así como su tamaño, ángulo, posición en X y posición en Y.

Sobre el ángulo basta saber que un ángulo de 0 hace el texto de izquierda a derecha en horizontal; y uno de 90 haría que el texto vaya de arriba hacia abajo.

<?php
$imagen = imagecreatefrompng($nombreImagen);
$color = imagecolorallocate($imagen, 0, 0, 0);
$tamanio = 20;
$angulo = 0;
$x = 400;
$y = 50;
$texto = "parzibyte.me";

Por cierto, para crear el color usamos imagecolorallocate. Los últimos 3 argumentos son los niveles de Rojo, Verde y Azul para el color. Como el texto será negro, los valores son 0 para los 3 casos. Si quisieras un color blanco podrías especificar 255 para los 3 colores.

Finalmente colocamos el texto usando la función imagettftext pasando todos los argumentos mencionados anteriormente. Más tarde, enviamos un encabezado para mostrar la imagen en el navegador.

Lo que hace que la imagen sea mostrada es la función imagepng; más adelante te mostraré unos ejemplos para forzar la descarga de la imagen y para guardar la imagen en el disco duro.

El código completo queda así:

<?php
$rutaFuente = __DIR__ . "/" . "sansita.ttf";
$nombreImagen = "imagen.png";
$imagen = imagecreatefrompng($nombreImagen);
$color = imagecolorallocate($imagen, 0, 0, 0);
$tamanio = 20;
$angulo = 0;
$x = 400;
$y = 50;
$texto = "parzibyte.me";
imagettftext($imagen, $tamanio, $angulo, $x, $y, $color, $rutaFuente, $texto);
header("Content-Type: image/png");
imagepng($imagen);
imagedestroy($imagen);

Por cierto, imagedestroy es para liberar los recursos usados. Al ejecutar el script, la imagen resultante es la que está bajo el encabezado de esta sección. A partir de ahora te mostraré varios ejemplos para colocar texto sobre imágenes usando PHP, pero omitiré estos detalles.

Forzar descarga de imagen

Esto no tiene que ver con el texto sobre la imagen, sino sobre encabezados y todo eso. En caso de que no quieras mostrar la imagen y en su lugar quieras forzar su descarga, puedes hacer lo siguiente:

<?php
header("Content-Type: image/png");
$salida = "imagen_procesada.png";
header('Content-Disposition: attachment; filename="' . $salida . '"');
imagepng($imagen);

En este caso con encabezados logramos todo. Si quieres el código completo lo dejaré en un repositorio al final del post.

Guardar imagen con texto en almacenamiento

Si quieres colocar texto sobre una imagen existente en PHP y quieres guardar el resultado, simplemente pasa un segundo argumento a imagepng (o imagejpeg) con la ruta de salida.

<?php
$salida = "procesada.png";
imagepng($imagen, $salida);
imagedestroy($imagen);
echo "Imagen guardada correctamente como " . $salida;

Ahora la imagen se va a guardar en el disco duro según la ruta indicada en $salida.

Ejemplo final: dos líneas de texto

Si no te basta con una línea de texto para colocar sobre la imagen usando PHP, aquí te traigo otro ejemplo. Puedes invocar a imagettftext cuantas veces quieras, con cualquier texto y coordenadas.

Para este caso he creado un formulario simple:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Probar texto de imagen</title>
</head>

<body>
    <form action="procesar.php">

        <input type="text" name="texto1" required placeholder="Primera línea">
        <br><br>
        <input type="text" name="texto2" required placeholder="Segunda línea">
        <br><br>
        <button type="submit">Enviar</button>
    </form>

</body>

</html>

Al procesar simplemente recuperamos las dos líneas de texto y lo colocamos. El truco está en cambiar la coordenada en Y para que la segunda línea quede bajo la primera.

<?php
if (!isset($_GET["texto1"]) || !isset($_GET["texto2"])) {
    exit("No hay texto que colocar");
}
$rutaFuente = __DIR__ . "/" . "sansita.ttf";
$nombreImagen = "imagen.png";
$imagen = imagecreatefrompng($nombreImagen);
$color = imagecolorallocate($imagen, 0, 0, 0);
$texto1 = $_GET["texto1"];
$texto2 = $_GET["texto2"];
$tamanio = 20;
$angulo = 0;
$espacio = 10;
$x = 400;
$y = 50;
$x2 = 400;
$y2 = $y + $espacio + $tamanio;
imagettftext($imagen, $tamanio, $angulo, $x, $y, $color, $rutaFuente, $texto1);
imagettftext($imagen, $tamanio, $angulo, $x2, $y2, $color, $rutaFuente, $texto2);
header("Content-Type: image/png");
imagepng($imagen);
imagedestroy($imagen);

Por cierto, en este caso la imagen se muestra directamente en el navegador, pero puedes aplicar los métodos mostrados anteriormente para forzar su descarga o guardar el resultado en el almacenamiento del servidor.

Poniendo todo junto

Si te gusta más la explicación en vídeo, aquí te dejo el tutorial:

El código completo con todos los ejemplos, incluyendo la imagen y la fuente TTF lo encuentras en mi GitHub.

Si te gusta PHP, te invito a leer más sobre este lenguaje.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

6 comentarios en “Agregar texto a imagen con PHP”

  1. Hola!. Excelente tutorial, muchas gracias.
    De casualidad sabes si es posible generar la imagen y adjuntarlo en un input de tipo file sin mostrarla ni descargarla?.
    Muchas gracias nuevamente.
    Saludos!.

    1. Buenas tardes. Podrías darme una orientación de como hacerlo??… he estado intentando desde ya días buscando la solución de generar la imagen y adjuntarlo en un input de tipo file sin mostrarla ni descargarla 🥺.
      Muchas gracias nuevamente.

  2. Como puede crear la imagen, pero mandando llamar la creación de la imagen pero de una función, sin la necesidad de abrir en pagina web. que todo se haga del lado del servidor. ????

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *