Aggiunta di testo dinamico sull'immagine

Realizzo un sito Web per gli utenti in cui possono personalizzare i logo. Per questo ho bisogno di una funzione per aggiungere testo dinamico da caselle di testo che l'utente compilerà e il testo dovrebbe quindi apparire sull'immagine selezionata. C'è un modo, ad esempio per Javascript, attraverso il quale posso soddisfare lo scenario di cui sopra? Gradirei qualche suggerimento su come potrei farlo.Aggiunta di testo dinamico sull'immagine

mio HTML finora è:

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

e la mia jQuery:

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

ma non sono stato successo finora.

fonte

2012-07-16 Dark Knight

Se si sta generando l'immagine con PHP, sarà necessario passare i valori della casella di testo allo script e quindi ricaricare l'immagine generata. È possibile utilizzare una chiamata AJAX per inviare il testo e ricevere un nuovo URL per l'immagine. – Alex

Vuoi dire che vuoi che il testo appaia sopra l'immagine, o che sia effettivamente salvato come file con quel testo? JavaScript non può fare il secondo - avresti bisogno di qualcosa come [PHP GD] (http://www.php.net/gd) – Utkanos

Ah, vuoi fare qualcosa come [** www.cooltext.com ** ] (http://www.cooltext.com) quindi. – arttronics

Si può provare la seguente:

Utilizzare HTML5 Canvas per rendere la vostra immagine Esempio: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
In cima alla immagine di rendering utilizzare l'HTML5 Canvas API per disegnare il testo che si desidera con il font richiesto attributi Riferimento: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Spero che sia utile.

fonte

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

Tutti i punti positivi - ma l'OP vuole salvare il file immagine con il testo su di esso, penso. – Utkanos

@Utkanos e user1528490 È possibile salvare i contesti Canvas come file immagine. Esempio qui: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/. Spero che sia d'aiuto! – 18bytes

Informazioni su come salvare e scaricare canvas come immagine, dai un'occhiata qui: http://jsfiddle.net/softvar/5hnyf/ – Kurtis92

Aggiunta di testo dinamico sull'immagine

risposta

Problemi correlati