Foros del Web » Programando para Internet » PHP »

Generar imagen con texto + WORDWARP

Estas en el tema de Generar imagen con texto + WORDWARP en el foro de PHP en Foros del Web. Buenas tardes a tod@s. Tengo una duda, a pesar de haber indagado por el foto y haber encontrado ciertas ideas. Tengo la siguiente necesidad: Por ...
  #1 (permalink)  
Antiguo 12/08/2008, 08:37
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Generar imagen con texto + WORDWARP

Buenas tardes a tod@s.

Tengo una duda, a pesar de haber indagado por el foto y haber encontrado ciertas ideas.

Tengo la siguiente necesidad:

Por diseño de un desarollo (un blog), los títulos de cada POST del blog, DEBEN tener un formato fuente que NO es del sistema.

Entonces: quiero generar en tiempo de ejecución una imagen para cada título (dinámico).

Hasta ahí, más o menos vamos bien.. pero el problema viene con...

Tengo un hueco de 400px de ancho para la escritura de esos título (la altura, es indiferente).

Hay MUCHÍSIMOS post cuyo texto excede de los 400px de ancho, por lo cual, debería de romperse el texto y pasar a una SEGUNDA LÍNEA dentro de mi imagen...

¿Alguien puede ayudarme al respecto, porfavor?

Muchas gracias a todos.

Javier
  #2 (permalink)  
Antiguo 12/08/2008, 08:42
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Hola el_javi,

Si revisas en el foro, lo ideal es usar wordwrap para cortar la cadena, luego usar explode() para partir la cadena y cada linea agregarla a tu imagen.

Saludos.
  #3 (permalink)  
Antiguo 12/08/2008, 08:45
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Hola GatorV

Gracias por tu pronta respuesta.

He revisado muchos post's del foro, y sobre todo muchas ayudas que has dado a la gente.

Mi pregunta era por si acaso alguien ya ha desarrollado alguna función para ello.

Hay que destacar que el corte por medio de WordWrap es con medición de LETRAS... y en este caso, dependo del ancho en PX.. ¿me sigues verdad?

Entonces, por eso era mi pregunta/petición... por ver si alguien tiene algún otro planteamiento al respecto...
  #4 (permalink)  
Antiguo 12/08/2008, 09:04
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Hola el_javi,

Desafortunadamente para eso no es lo mejor PHP, ya que no dispone de ninguna función para medir caracteres, ni de saber el ancho de una cadena de texto.

Saludos.
  #5 (permalink)  
Antiguo 12/08/2008, 09:07
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Hola de nuevo GatorV.

Anteriormente a PHP estube mirando una "nueva tecnología" denominada sifr la cual integra Flash y javascript.

Solo lo miré por encima, y resultó interesante, pero no conseguí hacerlo funcionar en mi Blog.

¿Imagino entonces que tendré que retomar dicha manera, y descartar PHP para textos dinámicos en zonas MUY justas en tamaño?

Gracias por tu información.
  #6 (permalink)  
Antiguo 12/08/2008, 09:11
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Así es, y esto es porque la tematica de imagenes es complicada, una forma seria que supieras el ancho en pixeles de cada caracter de la fuente con la que vas a trabajar, creas un arreglo con esa información y haces una función para obtener el ancho.

Posteriormente con esa información puedes saber si se va a pasar o no, y si lo hace agregas el salto.

Saludos.
  #7 (permalink)  
Antiguo 12/08/2008, 10:33
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Hola de nuevo a todos (hola GatorV)

Estoy intentando ver si consigo mi propósito por medio de PHP (y como bien me has dicho antes, montar un array con las medidas de cada letra para poder calcular el ancho de cada palabra y (mas o menos) ajustarlo al ancho del que dispongo).

Me he encontrado un problema, el cual no se si es por la Fuente que estoy suando o por el Content-type de mi documento...

Como cabecera para generar la imagen al vuelo estoy usando
Código PHP:
header("Content-type: image/png"); 
Pero si en mi texto hay algún caracter acentuado, me aparecen elementos extraños...

Os pongo mi código PHP que genera la imagen y mi código PHP de llamada para la generación de la imagen...

GENERADOR DE LA IMAGEN
Código PHP:
<?php
    
    
// Establecer el tipo de contenido
    
header("Content-type: image/png");
    
/********************************************************************************
    INICIALIZACIÓN DE VARIABLES
******************************************************************************* */
    
    // ***** WIDTH *************************************
    
$theWidth 400;
    if (isset(
$_GET["WIDTH"]))
    {
        
$theWidth $_GET["WIDTH"];
    }
    
    
// ***** HEIGHT *************************************
    
$theHeight 30;
    if (isset(
$_GET["HEIGHT"]))
    {
        
$theHeight $_GET["HEIGHT"];
    }
    
    
// ***** COLOR *************************************
    
$theColor "FF0000";
    if (isset(
$_GET["COLOR"]))
    {
        
$theColor $_GET["COLOR"];
    }
    
    
sscanf($theColor"%2x%2x%2x"$R$G$B); 
    
    
// ***** TEXT *************************************
    
$theText "Probando...";
    if (isset(
$_GET["TEXT"]))
    {
        
$theText $_GET["TEXT"];
    }
    
    
// ***** FONT *************************************
    
$theFont "fonts/arial.ttf";
    if (isset(
$_GET["FONT"]))
    {
        
$theFont $_GET["FONT"];
        
        
// Si la fuente no está ubicada en una carpeta, ponemos la carpeta por omisión de fuentes dentro de PHP/
        
if (!eregi("fonts/"$theFont))
        {
            
$theFont "fonts/".$theFont;
            if (!
file_exists($theFont))
            {
                
GLOBAL_message("No se encuentra el Archivo ".$theFont"error""Generate Image");
            }
        }
    }
    
    
// ***** FONT SIZE ***********************************
    
$theFontSize 20;
    if (isset(
$_GET["FONT_SIZE"]))
    {
        
$theFontSize $_GET["FONT_SIZE"];
    }
    
    
    
// ***** ANGLE (0 to 360 grados) *********************
    
$theAngle 0;
    if (isset(
$_GET["ANGLE"]))
    {
        
$theAngle $_GET["ANGLE"];
    }
    
    
    
// ***** LEFT POSITION *******************************
    
$theLeft 10;
    if (isset(
$_GET["LEFT"]))
    {
        
$theLeft $_GET["LEFT"];
    }
    
    
// ***** TOP POSITION ********************************
    
$theTop 20;
    if (isset(
$_GET["TOP"]))
    {
        
$theTop $_GET["TOP"];
    }
    
    
    
/* **************************************************************************** */
    /*
        Vamos a recorer el texto, letra a letra para ir calculando lo que ocupan las palabras.
        Si nos pasamos del ancho máximo haremos saltos de línea
        A su vez, iremos calculando el alto que nos hace falta de imagen TOTAL (dependiendo de la cantidad de líneas, y de la altura de línea de la fuente
    */
    
include_once("image_fonts_config.php");
    
    
    
    
    
/* **************************************************************************** */
    
    
    // Crear la imagen
    
$im imagecreatetruecolor($theWidth$theHeight);
    
    
// Generar transparecia al fondo de la imagen
    
imagesavealpha($imtrue);
    
// Ponemos el color de Fondo BLANCO
    
$FFFFFF_background imagecolorallocate($im255255255);
    
// Aplicamos un filtro de relleno en la imagen de Fondo con el color recién creado
    
imagefill($im00$FFFFFF_background);
    
    
// Crear algunos colores
    
$theColor imagecolorallocate($im$R$G$B);
    
    
// Agregar el texto
    
imagettftext($im$theFontSize$theAngle$theLeft$theTop$theColor$theFont$theText);
    
    
// Usar imagepng() resulta en texto más claro, en comparación con imagejpeg()
    
imagepng($im);
    
imagedestroy($im);
    
?>
LLAMADA A LA GENERACIÓN
Código PHP:
<?
    
function serializeParameters ($array_parameters)
    {
        
$cont_parameters 0;
        
$string_params "?";
        foreach (
$array_parameters as $key_param => $value_param)
        {
            
$string_params.= $key_param."=".$value_param;
            
            if (
$cont_parameters count($array_parameters) - 1)
            {
                
$string_params.= "&";
            }
        }
        return(
$string_params);
    }
    
    
$image_parameters = array (
        
"WIDTH" => "400",
        
"HEIGHT" => "30"
        
"COLOR" => "A953A9"
        
"TEXT" => urlencode("á"), 
        
"FONT" => "MyriadPro-Regular.otf"
        
"FONT_SIZE" => 26
        
"ANGLE" => 0
        
"LEFT" => 0
        
"TOP" => 25
    
);
?>

<img src="image-fonts/generar_imagen.php<?= serializeParameters($image_parameters); ?>">
Si alguien puede o quiere ayudarme, le estaré muy agradecido...

Gracias de antemano.

Javier
  #8 (permalink)  
Antiguo 12/08/2008, 10:37
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Hola eljavi,

Prueba que la codificación de tus archivos sea la misma, ya que eso de caracteres extraños suele pasar cuando usas dos codificaciones diferentes.

Saludos.
  #9 (permalink)  
Antiguo 13/08/2008, 04:39
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Buenos días GatorV

Gracias por tu contestación.. pero me quedo un poco con " Prueba que la codificación de tus archivos sea la misma"

El único Header que utilizo para la página que genera la imagen es
Código PHP:
header("Content-type: image/png"); 

Por lo cual no se de qué manera debería de comprobar que la codificación de mis archivos sea la misma...

Te agradecería que me dieras algún detall emás al respecto.

Un saludo.

Javier
  #10 (permalink)  
Antiguo 13/08/2008, 08:10
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Buenas tardes de nuevo.

Por más que busco el porqué del problema de los caracteres acentuados, no encuentro nada.

He usado una fuente ARIAL, y me acentua perfectamente... por lo que... ¿puede ser entonces que la fuente usada NO tiene caracteres acentuados? (la fuente en cuestión es la MyriadPro-Regular.otf

Pero... ¿porqué en Photoshop o en el Word SI que me da la posibilidad de acentuarlos?

Quedo a espera de vuestros comentarios y alguna ayuda para poder seguir con esto adelante, dado que llevo 1 día entero buscando información, y me he retrasado en la entrega de mi proyecto ... .

Un saludo.

Javier
  #11 (permalink)  
Antiguo 13/08/2008, 08:20
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Pues si con una fuente básica del tipo Arial no tienes problemas, entonces lo más probable es que si la fuente no tenga los caracteres acentuados.

Saludos.
  #12 (permalink)  
Antiguo 13/08/2008, 08:41
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Hola de nuevo GatorV

He repasado la fuente desde la carpeta Fonts de Windows, y en el ejemplo de fuente que te hace Windows al pulsarla, aparecen caracteres acentuados..

La verdad que estoy un podo "perdido" al respecto, porque en el Word, acentúa.. en el PhotoShop, acentúa, y en la vista de presentación de la fuente desde Windows.. también acentúa...

¿alguna idea o algún comentario?

Pongo una captura de la presentación de la fuente.

  #13 (permalink)  
Antiguo 13/08/2008, 08:48
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Hola el_javi,

Si lees la documentación oficial de PHP, dice que la cadena debe de ser UTF8, haz probado hacer utf8_encode en tu cadena?

Saludos.
  #14 (permalink)  
Antiguo 13/08/2008, 08:55
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

hola de nuevo GatorV.

Si, repasé la documentación de PHP, y vi la necesidad de usar formato UTF8 para el texto.


En el código fuente que puse al principio de esta conversación, no está incluido, pero cuando compruebo si me mandan la variable TEXT por GET, si le he añadido utf8_encode a la cadena.

He hecho un bucle con toda la familia completa de la fuente que por diseño me exigen usar (Myriad) y pareces er que ninguna de las fuentes integra elementos acentuados.

Si quieres puedes verlo aquí:
http://www.tumundomaquillaje.com/blo...p/LIB_util.php

No sé que hacer...
  #15 (permalink)  
Antiguo 13/08/2008, 08:57
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

HOMBRE!!!!

Después de esperar a que terminara la carga de todo el bucle, he visto que las Myriad Web SI ACENTÚAN!!!!

Por fin una posible solución!!!!!

Voy a ver ahora, el cómo hacer el arreglo del que hablamos, con las medidas de cada letra para controlar saltos de línea.

siento haberte mareado tanto GatorV.

Muchísimas gracias por tu ayuda y tu atención!!!!

Javier
  #16 (permalink)  
Antiguo 13/08/2008, 09:00
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Me alegra saber que si encontraste la fuente adecuada, espero puedas hacerlo, en PHP encontré esta función que hace algo mas o menos como lo que quieres:
Código PHP:
function imagettftextwrap($im$size$angle$x_pos$y_pos$color$font$instr)
{
    
$box = @imagettfbbox($size0$font$instr);
    
$width abs($box[4] - $box[0]);
    
$height abs($box[3] - $box[5]);
    
$overlap = (($x_pos $width) - imagesx($im));
    if(
$overlap 0//if the text doesn't fit on the image
    
{
        
$chars str_split($instr);
        
$str "";
        
$pstr "";
        for(
$m=0$m sizeof($chars); $m++)
        {
            
$bo imagettfbbox($fsize10$font1$str);
            
$wid abs($bo[4] - $bo[0]);
            if((
$x_pos1 $wid) < imagesx($im)) //add one char from the string as long as it's not overflowing
            
{
                
$pstr .= $chars[$m];
                
$bo2 imagettfbbox($fsize10$font1$pstr);
                
$wid2 abs($bo2[4] - $bo2[0]);
                if((
$x_pos1 $wid2) < imagesx($im))
                {
                    
$str .= $chars[$m];
                }   
                else
                {
                    break;
                }
            }
            else
            {
                break;
            }
        }
        
$restof "";
        for(
$l=$m$l sizeof($chars); $l++)
        {
            
$restof .= $chars[$l]; //add the rest of the string to a new line
        
}
        
imagettftext($im$size$angle$x_pos$y_pos$color$font$str); // print out the smaller line
        
imagettftext($im$size$angle0$y_pos $height$color$font$restof); //and the rest of it
    
}
    else
    {
        
imagettftext($im$size$angle$x_pos$y_pos$color$font$instr); //otherwise just do normally
    
}


Saludos.
  #17 (permalink)  
Antiguo 14/08/2008, 02:33
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Buenos días GatorV

La función que me has puesto la vi de pasada hace unos días, pero no fui capaz de hacerla funcionar.

Igualmente, desde que ayer me la pusiste, la estoy intentando ahcer funcionar, y no lo consigo... No me genera la imagen...

¿Podrías echarme una mano?

Gracias de antemano.

Javier
  #18 (permalink)  
Antiguo 14/08/2008, 08:24
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP

Hola el_javi,

¿Que problema te da? En sí son casi los mismos parametros que para imagetfttext.

Saludos.
  #19 (permalink)  
Antiguo 14/08/2008, 09:06
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Hola GatorV

Pues te cuento.. llevo todo el día trabajando en esta función, en hacerla funcionar y en adaptarla a que haga lo correcto.

Te cuento los problemas y déficit de la función.

PROBLEMAS

Código PHP:
function imagettftextwrap($im$size$angle$x_pos$y_pos$color$font$instr)
{
    
$box = @imagettfbbox($size0$font$instr);
    
$width abs($box[4] - $box[0]);
    
$height abs($box[3] - $box[5]);
    
$overlap = (($x_pos $width) - imagesx($im));
    if(
$overlap 0//if the text doesn't fit on the image
    
{
        
$chars str_split($instr);
        
$str "";
        
$pstr "";
        for(
$m=0$m sizeof($chars); $m++)
        {
            
$bo imagettfbbox($fsize10$font1$str);
            
$wid abs($bo[4] - $bo[0]);
            if((
$x_pos1 $wid) < imagesx($im)) //add one char from the string as long as it's not overflowing
            
{
                
$pstr .= $chars[$m];
                
$bo2 imagettfbbox($fsize10$font1$pstr);
                
$wid2 abs($bo2[4] - $bo2[0]);
                if((
$x_pos1 $wid2) < imagesx($im))
                {
                    
$str .= $chars[$m];
                }   
                else
                {
                    break;
                }
            }
            else
            {
                break;
            }
        }
        
$restof "";
        for(
$l=$m$l sizeof($chars); $l++)
        {
            
$restof .= $chars[$l]; //add the rest of the string to a new line
        
}
        
imagettftext($im$size$angle$x_pos$y_pos$color$font$str); // print out the smaller line
        
imagettftext($im$size$angle0$y_pos $height$color$font$restof); //and the rest of it
    
}
    else
    {
        
imagettftext($im$size$angle$x_pos$y_pos$color$font$instr); //otherwise just do normally
    
}


imagesx: Es función de PHP 5 (me daba problemas dado que estoy trabajando bajo un hosting de PHP4)
(ya lo he solucionado)

$fsize1: No existe esta variable. Realmente es $fsize

$font1: No existe esta variable. Realmente es $font

$x_pos1: No existe esta variable. Realmente es $x_pos

Todos estos elementos YA los he solucionado

Además esta función, lo que hace es controlar que si se pasa de 1 línea la frase, lo rompe en 2 líneas (pero no rompe por palabras.. lo rompe por caracteres)

Y además, a partir de la segunda línea, no controla si hay más posibles saltos de línea, sino que el resto de la frase lo pone de seguido en la segunda línea.

Y por último, a pesar de hacer un salto de línea en la imagen, no hacía una ampliación de la altura de la misma, por lo que en 20px de altura de fuente, generaba las 2 líneas.

Así que estoy trabajando en:
- Hacer que las palabras, si no entran en una línea, se rompan a una siguiente línea (pero la palabra completa)
- Hacer que esto tenga una recursividad, y que se genere una imagen multilínea, asumiendo como alto el alto de la fuente * el número de líneas generadas + el margen superior.


Si tienes algún aporte o ayuda, te estaré muy agradecido.

Un saludo.

Javier
  #20 (permalink)  
Antiguo 14/08/2008, 09:11
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Generar imagen con texto + WORDWARP


Cita:
Iniciado por Manual de PHP

imagesx

(PHP 4, PHP 5)

imagesx — Get image width
Por otro lado para que no se rompa en el caracter, por eso te decia que lo mejor es usar wordwrap y hacer el parsing por tu cuenta.

Saludos.
  #21 (permalink)  
Antiguo 14/08/2008, 09:14
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 1 mes
Puntos: 10
Respuesta: Generar imagen con texto + WORDWARP

Perdona GatorV

Me confundí al decirte la función.

No era imagesx sino str_split la que es de PHP5 (y por eso el hosting de PHP 4 no me dejaba usarlo).

Respecto al parseo y ruptura por palabras, estoy trabajando en ello.

Cuando lo termine y lo pula, publicaré el fichero de generación de imágenes por si acaso a alguien le es útil en un futuro.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:36.