Insertar texto dinamico en imagen

[Capi666]

Hola a todos,

Tengo un problema, no se como hacerlo... A ver si me podeis guiar mas o menos.

Resulta que tengo una imagen y un campo de texto, y me gustaria que cada vez que se escribe algo en el campo de texto aparezca en la imagen, pero siendo este texto tambien una imagen...

Mas o menos lo tengo hecho, el problema es como relacionarlo uno con otro.

Este seria la pantalla inicial:

Código PHP:

  <img src="camiseta.php" /> 
<input type="text" id="texto_1" name="texto_1" />  
   

Este seria el codigo php que hace que lo que escriba en el campo de texto aparezca como imagen encima de otra imagen:

Código PHP:

  <?php 
 
$imagen = imagecreatefromjpeg('img/imagen.jpg'); 
 
$black = imagecolorallocate($imagen, 0, 0, 0);  
 
$texto = 'mi texto'; 
 
imagestring($imagen, 3, 80, 23, $texto, $black); 
 
header("Content-type: image/jpeg"); 
imagejpeg($imagen); 
 
?>   

Mi problema es, como llamar al codigo php cada vez que escribo algo en el campo de texto y que se refleje en la imagen...

Gracias y un saludo,

[Keysher]

Si lo quieres hacer en tiempo real tendrás que utilizar una tecnología del estilo de AJAX. Pero ten en cuenta el retardo que va a haber entre que se llame al .php del servidor, se genere la imagen y se devuelva al cliente. No lo veo muy usable.

[Capi666]

Hola,

En esta web se puede ver un ejemplo y va bastante bien:

http://www.shirtcity.com/shop/index....orne_text=True

Un saludo,

[Keysher]

Bueno, pues lo dicho....

AJAX... y en el evento onChange (o similar) del campo de texto que llame al PHP que genere la imagen y que la vuelva a enviar al navegador.

De todos modos, depende de lo que vayas a hacer igual te compensa más pegar el texto directamente sobre la imagen, por medio de JavaScript y CSS, sin tener que generar la imagen.... (supongo que será viable)

[Capi666]

Hola,

El problema que tengo es la fuente, quiero poner fuentes no comunes...

Un saludo,

[Keysher]

Vale, entonces hazlo con AJAX.

[GatorV]

De hecho para regresar la imagen no es necesario AJAX, solamente cambias el URL de la imagen para volver a cargarla, es simple Javascript.

Saludos.

[Keysher]

Umm, iba a decir que aún así sería necesario usar AJAX para generar la nueva imagen. Pero no se necesita, siempre paso por alto la posibilidad de que el src de una imagen sea un script de PHP que genere la imagen...

[Capi666]

Hola,

¿Me podriais indicar mas o menos como seria?

Imagino que la imagen seria algo asi:
<img src="archivo.php?texto='hola'">

¿Pero como refresco la imagen cada vez?

Un saludo y gracias,

[Keysher]

Eso ya es tema de JavaScript, pero creo (y sólo creo) que con cambiarle el src valdría.

Es decir, te creas una función que lo que haga es acceder a ese elemento de la página (en éste caso sería un tag img con su correspondiente id) y cambiarle la propiedad src. Si la url es distinta a la que había antes, recargará la página.

Todo esto es JavaScript, puedes usar getElementByID para acceder a la imagen.

[Capi666]

Hola,

Gracias, voy a probar a ver si con solo cambair el src sirve...

Un saludo y gracias,

[Keysher]

Umm, cuando he dicho recargar la página, quería decir recargar la imagen. Me he colado. Pero vamos la idea es una función de JavaScript a la que llames en el onChange del campo de texto y que se encarge de cambiar el src de la imagen añadiendole el texto: archivo.php?texto=hola

Aunque viendolo así, deberías parsear un poco ese texto, por temas de espacios y caracteres raros...

[Capi666]

Hola,

Si, efectivamente funciona a la pefección.

Muchas gracias,