begin process at 2012 05 30 20:15:46
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

Ajax

 > 

Modification d'image dynamique en temps reel

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Modification d'image dynamique en temps reel

mardi 6 décembre 2011 à 09:37:20 | Modification d'image dynamique en temps reel

dedebusinet
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é.

Voici l'exemple de ce que je veux : [ Lien ]

(Pour tester l'exemple, Server : Urtem - Player name : Ortiss)

Merci,
mardi 6 décembre 2011 à 11:46:44 | Re : Modification d'image dynamique en temps reel

TychoBrahe
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.
mardi 6 décembre 2011 à 12:15:06 | Re : Modification d'image dynamique en temps reel

dedebusinet
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).
mardi 6 décembre 2011 à 12:16:08 | Re : Modification d'image dynamique en temps reel

dedebusinet
Oublie : c'est bien avec GD que je la génère.
mardi 6 décembre 2011 à 12:17:37 | Re : Modification d'image dynamique en temps reel

TychoBrahe
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.
mardi 6 décembre 2011 à 13:58:43 | Re : Modification d'image dynamique en temps reel

dedebusinet
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 ^^
mardi 6 décembre 2011 à 15:47:43 | Re : Modification d'image dynamique en temps reel

dedebusinet
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)
Code HTML :
                <h1>Generateur de signature Tera Online</h1> 
                <div id="prev-sign">  
                <img src="signature/create-sign.php" alt="" />
                </div>
                <ul id="images">
                <li><span id="1">test 1</span></li>
                <li><span id="2">test 2</span></li>
                <li><span id="3">test 3</span></li>
                <li><span id="4">test 4</span></li>
                </ul>


- Mon JS
Code Javascript :
    $(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('<img src="signature/create-sign.php" alt="" />');
            },
	                        error: function(){
	                    $("#prev-sign").html('Une erreur est survenue.');
	            }
	        });
	    });
});


Mon php qui génére l'image
Code PHP :
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
mardi 6 décembre 2011 à 17:18:36 | Re : Modification d'image dynamique en temps reel

TychoBrahe
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 :

Code HTML :
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <img src="manchot.png" alt="" id="banner">
    <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>
  </body>
</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.
mardi 6 décembre 2011 à 17:36:19 | Re : Modification d'image dynamique en temps reel

dedebusinet
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.


Cette discussion est classée dans : page, formulaire, image, temps, modification

Répondre à ce message

Sujets en rapport avec ce message

le formulaire, le fichier et l'image ... [ par PhpNono ] Bonjour ! Voilà j'ai un problème : J'ai 2 pages, 1-Dans la première je vais chercher des fichier(images en fait) ça c'est bon. je les selectionne, tou Formulaire+Clic=Image (sur la même page) [ par Farfadam ] Bonjour à tous,je ne sais pas si ma question concerne plus le coté JavaScript ou le PHP...je me lance quand même :Voilà j'ai une liste déroulante défi Formulaire, Le code pour envoyer une image dans une page web [ par mgced ] Salut, Je suis assez mauvais en codage, je suis pas douer.J aimerais savoir le code pour avoir le choix dans un fomulaire entre 4/5 image. exemple ima Modification de données [ par CyberMen30 ] J'ai des données dans une base de données que j'ai entré via un formulaire dans une page php.Je veux me faire une page qui me donnerait la possibilité Capture de page [ par jekifvb6 ] Bonjour à toutes et tous, J'ai réalisé une page web avec une animation flash à l'intérieur et ce que j'aimerais, c'est mettre un bouton qui permette Upload d'image [ par Anus_hurlant ] Hello,je souhaite copier une image envoyée par l'utilisateur et j'utilise pour cela un fomulaire qui se présente ainsi :< Comment envoyer un formulaire facilement ?? [ par pspower ] Bonjour,J'ai creer un formulaire en php à la page : index.php  et les réponses sont envoyées à traitement.php:traitement.php est en quelques sorte une Formulaire [ par mehdisfr ] salutj'ai une page formulaire.php qui contient un formulaire mon probleme c quand je refresh ma page l.action de l'envoie se fait toute seule. Est ce controle variable formulaire avant envoi bdd mysql [ par beckam ] Salut, j'utilise easyphp ainsi que mysql. Je dispose d'une base de données avec une table qui est alimentée par un formulaire html avec utilisation d ERREUR GRAVE pas le temps de faire le update!!! [ par rachidphp93 ] Bonjour;et tu saij'ai une erreur qui m'etonne??  je vien defaire un test:alors: j'ai boutton valider qui me recharge la meme page pour faire l


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Waterfall in Kauai Hawaii With Rainbow
Photo High Dynamic Image of Monument Valley 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,310 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)