0

Investigando en la red encontré como agregar texto a una imagen con los siguientes programas:

Nombre del archivo: writingOverImage.php

<?php 

require_once 'class.textPainter.php';

$x = $_GET["x"];
$y = $_GET["y"];

$R = $_GET["r"];
$G = $_GET["g"];
$B = $_GET["b"];

$size = $_GET["size"];

$text = $_GET["text"];


$img = new textPainter('./writingOverImage.jpg', $text, './Franklin.ttf', $size);

if(!empty($x) && !empty($y)){
    $img->setPosition($x, $y);
}

if(!empty($R) && !empty($G) && !empty($B)){
    $img->setTextColor($R,$G,$B);
}

$img->show();

?>

Nombre del archivo: writingOverImageFile.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Floating window with tabs</title>

<style>

/*
This defines the workspace where i place the demo.
*/
#container {
    text-align: left;
    background: #FFF;
    width: 865px;
    margin: 20px auto;
    padding: 20px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    -moz-box-shadow: 0px 0px 10px #BBB;
    -webkit-box-shadow: 0px 0px 10px #BBB;
    box-shadow: 0px 0px 10px #BBB;
}
</style>

</head>
<body>


<div id="container">

<?php 
    if($_POST["sending"]=="yes"){
        if(strlen($_POST["text"]<50)){
            echo '
                <img id="imgFinal" src="writingOverImage.php?x=center&y=950&size=30&r=43&g=43&b=42&text='.$_POST["text"].'" />               
            ';

        }else{
            echo "The text is too large for my demo!! ";
        }

    }else{
        echo '<img id="imgFinal" src="writingOverImage.php?size=50&text=Hello world!!" />';

    }
?>


<form name="formulario" action="" method="post" class="contactoFormulario">
        <div class="caja"><input type="text" name="text" />Text you want to write over the image</div>

        <button class="botonFormulario" type="submit" name="Submit" value="Enviar" />Generate image</button>
        <input type="hidden" name="sending" value="yes" />
    </form>
</div>

</body>
</html>

Nombre del archivo: class.textPainter.php

<?php
/**
 * http://alvarotrigo.com
 *  
 * This class allows to print text over a given image.
 * It needs from a TrueType font format (ttf).
 * 
 * The resulting image will be show in png format.
 * 
 * @author alvarotrigolopez 
 * @see http://www.php.net/manual/es/ref.image.php
 */
class textPainter{
    private $img;
    private $textColor;
    private $position = array();
    private $startPosition = array();

    private $imagePath;
    private $text;
    private $fontFile;
    private $fontSize;
    private $format;


    /**
     * Class Constructor 
     * 
     * @param string $imagePath background image path
     * @param string $text text to print
     * @param string $fontFile the .ttf font file (TrueType)
     * @param integer $fontSize font size
     * 
     * @access public
     */
    public function __construct($imagePath, $text, $fontFile, $fontSize){       
        $this->imagePath = $imagePath;
        $this->text = $text;
        $this->fontFile = $fontFile;
        $this->fontSize = $fontSize;

        $this->setFormat();
        $this->setQuality();
        $this->createImage();
        $this->setTextColor();
        $this->setPosition();
    }

    /**
     * Sets the text color using the RGB color scale.
     * 
     * @param integer $R red quantity
     * @param integer $G gren quantity
     * @param integer $B blue quantity
     * 
     * @access public
     */
    public function setTextColor($R=230, $G=240, $B=230){
        $this->textColor = imagecolorallocate ($this->img, $R, $G, $B);
    }

    /**
     * Shows the resulting image (background image + text)
     * On the same format as the original background image.
     * 
     * @access public
     */
    public function show(){
        //show thumb

        header("Content-type: image/".$this->format);   
        //creates the text over the background image
        imagettftext($this->img, $this->fontSize, 0, $this->startPosition["x"], $this->startPosition["y"], $this->textColor, $this->fontFile, $this->text);

        switch ($this->format){
            case "JPEG":


                imagejpeg($this->img, NULL, $this->jpegQuality);
                //imagejpeg($this->img,"",$this->jpegQuality);
                break;
            case "PNG":
                imagepng($this->img);
                break;
            case "GIF":
                imagegif($this->img);
                break;
            case "WBMP":
                imagewbmp($this->img);
                break;
            default:
                imagepng($this->img);
        }
    }

    /**
     * Sets the quality of the resulting JPEG image.
     * Default: 85
     * @param integer $value quality
     * @access public
     */
    public function setQuality($value=85){
        $this->jpegQuality = $value;
    }

    /**
     * Calculates the X and Y coordinates for the desired position 
     * of the text. 
     * @param string $x x position: left, center, right or custom 
     * @param string $y y position: top, center, bottom or custom
     * @access public
     */
    public function setPosition($x="center", $y="center"){
        $this->position["x"] = $x;
        $this->position["y"] = $y;

        $dimensions = $this->getTextDimensions();

        if($x=="left"){
            $this->startPosition["x"] = 0;
        }
        else if($x=="center"){          
            $this->startPosition["x"] = imagesx($this->img)/2 - $dimensions["width"]/2;
        }
        else if($x=="right"){
            $this->startPosition["x"] = imagesx($this->img) - $dimensions["width"];
        }
        //custom
        else{
            $this->startPosition["x"] = $x;
        }

        if($y=="top"){
            $this->startPosition["y"] = 0 + $dimensions["heigh"];
        }
        else if($y=="center"){
            $this->startPosition["y"]  = imagesy($this->img)/2 + $dimensions["heigh"]/2;
        }
        else if($y=="bottom"){
            $this->startPosition["y"]  = imagesy($this->img);
        }
        //custom
        else{
            $this->startPosition["y"] = $y;
        }

    }

    /**
     * Determines the format of the background image and 
     * sets it for the final image result.
     * Supported formats: jpeg, jpg, png, gif, wbmp
     * @access private
     */
    private function setFormat(){

    $this->format = preg_replace("/.*\.(.*)$/","\\1",$this->imagePath);
        //$this->format = ereg_replace(".*\.(.*)$","\\1",$this->imagePath);
        $this->format = strtoupper($this->format);

        if($this->format=="JPG" || $this->format=="JPEG"){
            $this->format="JPEG";
        }
        else if($this->format=="PNG"){
            $this->format="PNG";
        }
        else if ($this->format=="GIF"){
            $this->format="GIF";
        }
        else if ($this->format=="WBMP"){
            $this->format="WBMP";
        }else{
            echo "Not Supported File";
            exit();
        }
    }

    /**
     * Create a new image to work with from the given background 
     * image.
     * Supported formats: jpeg, jpg, png, gif, wbmp
     * @access private
     */
    private function createImage(){
        if($this->format=="JPEG"){
            $this->img = imagecreatefromjpeg($this->imagePath);
        }
        else if($this->format=="PNG"){
            $this->img = imagecreatefrompng($this->imagePath);
        }
        else if ($this->format=="GIF"){
            $this->img = imagecreatefromgif($this->imagePath);
        }
        else if ($this->format="WBMP"){
            $this->img = imagecreatefromwbmp($this->imagePath);
        }else{
            echo "Not Supported File";
            exit();
        }
    }

    /**
     * Sets the font file for the text.
     * 
     * @param string $fontFile the .ttf font file (TrueType)
     * @access public
     */
    public function setFontFile($fontFile){
        $this->fontFile = $fontFile;

        //recalculate the text position depending on the new font file
        $this->setPosition($this->position["x"], $this->position["y"]);
    }

    /**
     * Sets the font size for the text.
     * 
     * @param integer $fontSize 
     * @access public
     */
    public function setFontSize($fontSize){
        $this->fontSize = $fontSize;

        //recalculate the text position depending on the new font size
        $this->setPosition($this->position["x"], $this->position["y"]);
    }

    /**
     * It returns the dimensions of the text to print with the given 
     * size and font.
     * 
     * @return array containing the width and height (width,heigh) of the text to print.
     * @access public
     */
    private function getTextDimensions(){
        $dimensions = imagettfbbox($this->fontSize, 0, $this->fontFile, $this->text);

        $minX = min(array($dimensions[0],$dimensions[2],$dimensions[4],$dimensions[6]));
        $maxX = max(array($dimensions[0],$dimensions[2],$dimensions[4],$dimensions[6]));

        $minY = min(array($dimensions[1],$dimensions[3],$dimensions[5],$dimensions[7]));
        $maxY = max(array($dimensions[1],$dimensions[3],$dimensions[5],$dimensions[7]));

        return array(
            'width' => $maxX - $minX,
            'heigh' => $maxY - $minY
        );
    }  
}

?>

Pero no he podido guardar automáticamente el resultado en un archivo tipo jpg o png, o poner mas de un texto sobre la misma imagen, de antemano muchas gracias.

Todo se guarda aqui:

$img = new textPainter('./writingOverImage.jpg', $text, './Franklin.ttf', $size);

Pero después de esa línea no puedo poner nada mas porque de ser así deja de funcionar.

P.D. El programa funciona con el formato de letra "Franklin.ttf" si no la encuentra no funciona, pueden utilizar otro formato de letra cambiando en el programa el nombre del archivo de formato de letra, del mismo modo si no existe el archivo writingOverImage.jpg

2 respuestas 2

1

Aquí te adjunto un pequeño ejemplo de la librería GD para el uso que necesitas:

<?php
// Cargo la imagen donde escribir los textos
$image = imagecreatefrompng('prueba.png');

//Header
header('Content-type: image/png');

// Algunos colores
$gris = imagecolorallocate($image, 128, 128, 128);
$negro = imagecolorallocate($image, 0, 0, 0);

// Textos a imprimir
$texto1 = 'Primer texto.';
$texto2 = 'Otro texto.';

// Establecer la variable de entorno para GD
// El archivo de fuente debe estar en la misma ruta del codigo
putenv('GDFONTPATH=' . realpath('.'));

//Fuente a utilizar (sin extension)
$fuente = 'arial';

// Añadir el texto1
imagettftext($image, 10, 0, 10, 20, $gris, $fuente, $texto1);

// Añadir el texto2
imagettftext($image, 20, 0, 10, 50, $negro, $fuente, $texto2);

// Genero imagen y libero memoria
imagepng($image);
imagedestroy($imagen);
?>

Puedes agregar tantos textos como quieras con la función imagettftext, fijate que lo he comentado bastante para que entiendas, cualquier duda me consultas.

3
  • muchas gracias funciona genial, lo unico que no ubico es donde o como guarda la imagen en el archivo png? podrias despejarme esta duda por favor, de nuevo muchas gracias por tu ayuda.
    – Stravos77
    Commented el 20 feb. 2017 a las 23:53
  • por nada, como esta escrito el código que te pase no guarda la imagen en ningún archivo, solo genera la imagen. Para que te guarde la imagen en un archivo le pasas el nombre que quieres para el archivo como segundo parámetro a la función imagepng. p.Ej. imagepng($image, $filename); ($filename guarda el nombre del archivo)
    – Mauro
    Commented el 21 feb. 2017 a las 0:04
  • Bro jejeje voy viendo este mensaje, cuando empeze a escribir hoy no vi los ultimos mensajes, sorry, bueno de igual forma muchas gracias por tus comentarios, tengo solo una duda, cuando pongo imagepng($image, $filename); despues de esta linea ya no hace nada, es mas en pantalla solo se muestra un pequeño recuadro, y por mas que le pongo codigo para que me redireccione a otra web, no lo hace, podrias decirme porque actuara de esta forma? gracias.
    – Stravos77
    Commented el 22 feb. 2017 a las 17:39
1

personalmente para hacer ese tipo de trabajos con imagenes en PHP utilizo directamente la librería GD (que es la que utilizan los códigos que encontraste) es muy sencillo (mas sencillo que los programitas :), este es el link de documentación:

http://php.net/manual/es/book.image.php

Si se te complica y lo necesitas, consultame y te hago un ejemplo sencillo. Saludos!

4
  • Muchas gracias por tu respuesta @Mauro, he revisado el link que me proporcionaste, ya me había encontrado con esta información pero para serte honesto no le entendí muy bien, solo pude armar el programa que subí a este foro, pero como te comento, no he podido agregar mas de una linea de texto a una misma imagen y que el resultado lo guarde en un archivo png o jpg, te agradecería mucho me puedas dar una orientación sobre este dilema, muchas gracias.
    – Stravos77
    Commented el 20 feb. 2017 a las 17:46
  • ok, dame un rato y te subo un ejemplo.
    – Mauro
    Commented el 20 feb. 2017 a las 22:35
  • Bro @Mauro ya lo he logrado, muchas gracias, en esta linea de código es donde se manda a guardar en el archivo especificado con la variable $archivo { imagepng($image, $archivo); } Muchas gracias por tu apoyo, te envio saludos y bendiciones.
    – Stravos77
    Commented el 22 feb. 2017 a las 16:50
  • Bro ya quedo, lo graba con el texto y me permite avanzar, el detalle esta esta linea {header('Content-type: image/png');} asi que la quite y santo remedio, por ultimo quise centrar el texto pero se me hizo un rollo, lo intente con varios procesos pero nada, decidi dejarlo por la paz pero quitando eso del centrado todo lo demas esta excelente, de nuevo muchas gracias por tu apoyo, estamos en contacto, saludos y bendiciones.
    – Stravos77
    Commented el 22 feb. 2017 a las 23:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.