Modification d'image dynamique en temps reel

dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011 - 6 déc. 2011 à 09:37
dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011 - 6 déc. 2011 à 17:36
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,

8 réponses

TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
6 déc. 2011 à 11:46
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.
0
dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011
6 déc. 2011 à 12:15
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).
0
dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011
6 déc. 2011 à 12:16
Oublie : c'est bien avec GD que je la génère.
0
TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
6 déc. 2011 à 12:17
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011
6 déc. 2011 à 13:58
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 ^^
0
dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011
6 déc. 2011 à 15:47
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’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
0
TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
6 déc. 2011 à 17:18
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 :

<html>
  <head>
    <title>test</title>
  </head>
  
    
    <form action="#" method="get">
      <select name="banner_img" onchange="document.getElementById('banner').src=this.value">
<option value="manchot.png">img 1</option>
<option value="manchot_black.png">img 2</option>
      </select>
    </form>
  
</html>

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.
0
dedebusinet Messages postés 6 Date d'inscription samedi 12 janvier 2008 Statut Membre Dernière intervention 6 décembre 2011
6 déc. 2011 à 17:36
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.
0