Ajout de texte dynamique sur l'image

Je crée un site Web pour les utilisateurs où ils peuvent personnaliser les logos. Pour cela, j'ai besoin d'une facilité pour ajouter du texte dynamique à partir de zones de texte que l'utilisateur va remplir et le texte devrait alors apparaître sur l'image sélectionnée. Y at-il un moyen, par exemple pour Javascript, à travers lequel je peux remplir le scénario ci-dessus? J'apprécierais toute suggestion de comment je pourrais faire ceci.Ajout de texte dynamique sur l'image

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é réussi jusqu'à présent.

Source

2012-07-16 Dark Knight

Si vous générez votre image avec PHP, vous devrez passer les valeurs de la zone de texte au script, puis recharger l'image générée. Vous pouvez utiliser un appel AJAX pour envoyer le texte et recevoir une nouvelle URL pour l'image. – Alex

Vous voulez dire que vous voulez que le texte apparaisse sur l'image, ou en fait être enregistré en tant que fichier avec ce texte dessus? JavaScript ne peut pas faire le dernier - vous auriez besoin de quelque chose comme [PHP GD] (http://www.php.net/gd) – Utkanos

Ah, vous voulez faire quelque chose comme [** www.cooltext.com ** ] (http://www.cooltext.com) alors. – arttronics

Vous pouvez essayer ce qui suit:

Utilisez HTML5 Canvas pour rendre votre image Exemple: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
En plus de l'image rendue utiliser l'API Canvas HTML5 pour dessiner le texte que vous voulez avec la police requise attributs Référence: https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Espérons que c'est utile.

Source

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

Tous les bons points - mais l'OP veut enregistrer le fichier image avec le texte dessus, je pense. – Utkanos

@Utkanos et user1528490 Vous pouvez enregistrer les contextes Canvas en tant que fichier image. Exemple ici: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/. J'espère que cela aide! – 18bytes

A propos de sauvegarder et télécharger la toile comme image, jetez un oeil ici: http://jsfiddle.net/softvar/5hnyf/ – Kurtis92

Ajout de texte dynamique sur l'image

Répondre

Questions connexes