Modification d'image dynamique en temps reel

Question

Bonjours,

Je suis sur la création d'un générateur de signature pour les forum dynamiquement pour un jeu qui sortira prochainement.

Actuellement j'ai ma page avec mon php de création d'image basique et ma page html avec mon formulaire pour paramétrer l'image.

Or je veux avoir un aperçu de l'image qui ce modifie en temps réel sur la page de mon formulaire avant que l'utilisateur envoi le formulaire pour créer son image.

Je ne sais pas comment m'y prendre, je me suis tourné vers l'ajax mais je ne trouve que des exemples avec des fichiers xml etc... cependant je penses plutôt avoir besoin de modifier des variables dans mon php qui créé l'image à la volé.

[b]Voici l'exemple de ce que je veux : http://aion.yg.com/signatures

(Pour tester l'exemple, Server : Urtem - Player name : Ortiss) /b

Merci,

TychoBrahe · Answer

Salut,

Différencie bien deux choses :
1. La génération de l'image elle même (avec GD par exemple).
2. L'interface client qui permet de personaliser l'image.

Avant de faire une super interface de la mort qui tue, assure toi que tu sais générer les images. Pour ça c'est simple, tu peux utiliser GD.

dedebusinet · Answer

La génération de l'image ne me pause pas de soucis, c'est le fait que l'utilisateur paramètre la création de cette image qui me pause problème dans le sens ou je veux qu'un aperçu ce met à jours en instantané sur la page pendant la création de l'image (fond de tel couleur, quel texte mettre ect... en temps reel).

dedebusinet · Answer

Oublie : c'est bien avec GD que je la génère.

TychoBrahe · Answer

Ba c'est tout simple, tu utilises JavaScript pour changer l'adresse de l'image. Bien entendu ça sous entend que els paramètres de l'image soient passés en get.

dedebusinet · Answer

ok, quelqu'un aurai un exemple style tuto pour voir un peux le principe pour l'actualisation de la prévisualisation de l'image au changement d'un paramètre ? car pour moi ça reste plutôt flou ^^

dedebusinet · Answer

Bon je me suis débrouillé un peut seul, mais je bloque au niveau du rafraichissement de l'image via Ajax.

Dans la page de visualisation :
- Mon html (on clique sur les span pour changer la couleur du texte)

                Generateur de signature Tera Online
 
                
  
                
                

                
                test 1
                test 2
                test 3
                test 4
                


- Mon JS

    $(document).ready(function(){
    $("#images li span").click(function(){
        $.ajax({type:"POST", data: "fontcolor="+$(this).attr("id"), url:"signature/create-sign.php", cache:false,
            success: function(data){
                $("#prev-sign").html('');
            },
                        error: function(){
                    $("#prev-sign").html('Une erreur est survenue.');
            }
        });
    });
});


Mon php qui génére l'image

header ("Content-type: image/jpeg");
$image = imagecreate(200,50);

$couleurpolice = $_GET['fontcolor'] ;

if ($couleurpolice == '1'){
$couleur = imagecolorallocate($image, 255, 128, 0);
} else if ($couleurpolice == '2'){
$couleur = imagecolorallocate($image, 0, 0, 255);
} else if ($couleurpolice == '3'){
$couleur = imagecolorallocate($image, 156, 227, 254);
} else if ($couleurpolice == '4'){
$couleur = imagecolorallocate($image, 0, 0, 0);
}

imagestring($image, 4, 35, 15, "Salut les Zéros !", $couleur);

imagejpeg($image);


Quand je clique sur les span rien ne change alors que si j&#8217;attribue une valeur directement à la variable, les couleurs changes.
Donc mon souci viens surement de ma façon de transmettre ou de récupérer l'id vers le php.

Merci

TychoBrahe · Answer

Jeune padawan, saches que l'écoute des anciens est un élément important de la réussite. Dans mon précédent message je t'ai donné une manière simple de faire ce que tu recherches, mais tu t'es entêté dans ton erreur. Je te passe un code d'exemple illustrant mes propos : test L'utilisation d'ajax est une erreur, il est tout à fait normal qu'il n'y en ai pas. La non utilisation de jQuery est un simple choix de ma aprt, tu peux l'utiliser si tu veux, mais pas pour faire de l'ajax. Soit dit en passant, un id ne doit pas commencer par un chiffre, c'est une erreur. Il peux en contenir, mais pas le premier caractère.

dedebusinet · Answer

Autant pour moi, merci grand sage.
Je n'avais pas compris en faite...
Je vais essayer la solution que tu me propose.

Merci pour votre aide.

Modification d'image dynamique en temps reel

8 réponses

Votre réponse

Discussions similaires