L'ajout de texte dynamique sur l'image

Je suis en train de faire un site web pour les utilisateurs où ils peuvent créer de personnaliser les logos. Pour cela, j'ai besoin d'une installation pour ajouter du texte dynamique des zones de texte où l'utilisateur va remplir et le texte devrait alors apparaître sur l'image sélectionnée. Est-il possible, par exemple pour Javascript, grâce auquel je peux répondre à la scénario ci-dessus? Apprécie les suggestions de comment je pourrais faire cela.

Mon HTML jusqu'à présent est:

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

et mon jQuery:

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

mais je n'ai pas été une réussite aussi loin.

Si vous êtes de la génération de votre image avec PHP, vous devrez passer les valeurs textbox pour le script, puis de recharger l'image générée. Vous pouvez utiliser un appel AJAX pour envoyer le texte et recevoir en retour une nouvelle URL pour l'image.
Vous voulez dire que vous souhaitez que le texte apparaisse sur l'image, ou en fait être enregistré dans un fichier avec ce texte? JavaScript ne peut pas faire le dernier - vous auriez besoin de quelque chose comme PHP GD
Ah, vous voulez faire quelque chose comme www.cooltext.com, puis.
Oui, je suis préoccupé par ce dernier scénario. Est-ce un concerne le traitement de l'image?
Oui, vous avez à gérer l'image, et la superposition de texte sur elle, sur le serveur, via quelque chose comme GD. Si c'est acceptable, réponse et je vais poster une réponse en montrant comment cela est fait (sera pour plus tard, aujourd'hui, tout de même)

OriginalL'auteur Dark Knight | 2012-07-16

10

Vous pouvez essayer ce qui suit:
1. Utiliser HTML5 Canvas pour rendre votre image Exemple: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
2. Sur le dessus de l'image de rendu, utiliser l'API HTML5 Canvas pour dessiner le texte que vous voulez avec les attributs de police de Référence: https://developer.mozilla.org/en/Drawing_text_using_a_canvas
L'espérance de son utilité.

Tous les bons points - mais l'OP veut enregistrer le fichier d'image avec le texte, je pense.
et user1528490 Vous pouvez enregistrer la Toile contextes comme un fichier image. Exemple ici: html5canvastutorials.com/advanced/.... Espérons que cela aide!
À propos de les enregistrer et de télécharger de la toile en tant qu'image, prendre un coup d'oeil ici: jsfiddle.net/softvar/5hnyf

OriginalL'auteur 18bytes

Vous devez vous connecter pour publier un commentaire.