Agregar texto dinámico en la imagen

Estoy creando un sitio web para usuarios en el que pueden personalizar creativamente logotipos. Para esto necesito una instalación para agregar texto dinámico de los cuadros de texto que el usuario completará y el texto debería aparecer en la imagen seleccionada. ¿Hay alguna forma, por ejemplo para Javascript, a través de la cual pueda cumplir el escenario anterior? Agradecería cualquier sugerencia de cómo podría hacer esto.Agregar texto dinámico en la imagen

Mi HTML hasta ahora es:

<html> 
    <body> 
    <input type="text" id="submit"/> 
    <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" /> 
    </body>

y mi jQuery:

$('#submit').change(function() { 
    $('#toChange').text($('#submit').val()); 
});

pero no he tenido éxito hasta el momento.

Fuente

2012-07-16 Dark Knight

Si está generando su imagen con PHP, tendrá que pasar los valores del cuadro de texto al script y luego volver a cargar la imagen generada. Podría usar una llamada AJAX para enviar el texto y recibir una nueva URL para la imagen. – Alex

¿Quiere decir que quiere que el texto aparezca sobre la imagen, o en realidad se guarde como un archivo con ese texto sobre él? JavaScript no puede hacer lo último: necesitarías algo como [PHP GD] (http://www.php.net/gd) – Utkanos

Ah, quieres hacer algo como [** www.cooltext.com ** ] (http://www.cooltext.com) a continuación. – arttronics

Puede intentar lo siguiente:

uso de HTML5 Canvas para hacer que su imagen Ejemplo: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
En la parte superior de la imagen renderizada utilizar el HTML5 API Canvas para dibujar el texto que desea con la fuente requerida atributos Referencia: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Espero que sea útil.

Fuente

2012-07-16 10:20:58 18bytes

Todos los puntos buenos, pero el OP quiere guardar el archivo de imagen con el texto, creo. – Utkanos

@Ukanos y user1528490 Puede guardar los contextos de lienzo como un archivo de imagen. Ejemplo aquí: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/. ¡Espero eso ayude! – 18bytes

Acerca de guardar y descargar lienzo como imagen, mira aquí: http://jsfiddle.net/softvar/5hnyf/ – Kurtis92

Agregar texto dinámico en la imagen

Respuesta

Cuestiones relacionadas