Problème - Création d'image

Version imprimable

Bonjour à tous,

Je suis entrain de réaliser un petit formulaire me permettant de créer des images pour les menus en PHP. Cependant je comprends pas pourquoi ça ne m'affiche pas l'image étant donner que j'ai pas fais un script bien compliquer...

J'y suis arrivé en exécutant directement mon fichier PHP qui génère l'image, là j'ai l'impression que c'est le faites de le faire via un formulaire en passant par le $.ajax en jQuery...J'ai l'impression que le problème viens de l'affichage de l'image PHP dans ma page HTML. Mais je ne vois pas du tout comme faire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<fieldset style="width: 40%;">
<legend>Formulaire</legend>
<form method="post" action="">
<label>Largeur :</label><input type="text" name="largeur"/><br />
<label>Hauteur :</label><input type="text" name="hauteur" /><br />
<label>Texte : </label><input type="text" name="texte"/><br />
<label>Couleur Fond : </label><input class="myColorPicker" name="couleurf" type="text" /><br />
<label>Couleur texte : </label><input class="myColorPicker" name="couleurt" type="text" /><br />
<input type="submit" value="Aperçus"/>
</form>
</fieldset>
<div id="resultat"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
$(document).ready( function() {
        $('input.myColorPicker').myColorPicker();
 
		function convertirDecimal(code){
			var tab = new Array(3);
			tab["r"] = parseInt( code.substr(1,2), 16 ) ;
			tab["g"] = parseInt( code.substr(3,2), 16 ) ;
			tab["b"] = parseInt( code.substr(5,2), 16 ) ;
			return tab ;
		}
 
		$("form").submit( function(){
 
			var texte = $("input[name=texte]").val();
			var couleurf = $("input[name=couleurf]").val();
			var couleurt = $("input[name=couleurt]").val();
 
			var couleurFond = convertirDecimal(couleurf)['r']+","+convertirDecimal(couleurf)['g']+","+convertirDecimal(couleurf)['b'] ;
			var couleurTexte =  convertirDecimal(couleurt)['r']+","+convertirDecimal(couleurt)['g']+","+convertirDecimal(couleurt)['b'] ;
 
			var largeur = $("input[name=largeur]").val() ;
			var hauteur = $("input[name=hauteur]").val() ;
 
			$.ajax({
				type: "POST",
				url: "traitement.php",
				data: "texte="+texte+"&couleurFond="+couleurFond+"&couleurTexte="+couleurTexte+"&largeur="+largeur+"&hauteur="+hauteur,
				success: function(data){
					$("div#resultat").html("<img src=\""+data+"\" />");
				}
			});
 
			return false;
		});
	});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?php
header ("Content-type: image/png");
 
$texte = $_POST['texte'];
$couleurFond = explode(",", $_POST['couleurFond'] );
$couleurTexte = $_POST['couleurTexte'];
$largeur = $_POST['largeur'];
$hauteur = $_POST['hauteur'] ;
 
$texteBox = imagettfbbox( 4, 0, "arial.ttf", $texte);
 
$longueurTexte = abs( $texteBox[0] ) + abs ( $texteBox[2] ) ;
$hauteurTexte = abs( $texteBox[7] ) - abs( $texteBox[1] ) ;
 
$image = imagecreatetruecolor($largeur, $hauteur);
imagesavealpha($image, true);
$couleurAlpha = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $couleurAlpha);
$colorFond = imagecolorallocate($image, $couleurFond[0], $couleurFond[1], $couleurFond[2]);
imagefilledrectangle($image, 0, 0, $largeur, $hauteur, $colorFond );
 
echo imagepng($image);
 
?>

19/01/2011, 20h56
MichaelVDH

Je ne te cache pas que j'y connais rien en jQuery.
Ton script PHP fonctionne quand tu l'éxecute d'après ce que j'ai compris.

Est-ce tout les infos de ton formulaire sont bien transmise à ton script PHP?
Est-ce tu arrives à afficher les variables dans ton script PHP?

Essai p-e en remplacant $_POST par $_REQUEST dans ton script PHP.

J'ai déjà rencontré des problèmes lorsque je tentais de récupérer mes variables envoyé par mon XHR en les récupérant avec $_POST

J'espere que ca pourra t'aider
19/01/2011, 21h05
tonymx15

J'ai trouvé la réponse en fin de journée lol

En faites dans traitement.php j'ai créé des sessions à partir des post, et c'est dans image.php que j'ai déplacé le script php pour faire l'image avec les sessions...

Je ne comprends pas bien pourquoi à vraie dire mais je pense que pour créer des images les posts ne marchent pas, du moins il faudrait les serialisés...

Le principal est que ça marche, merci quand même de m'avoir guider :)
19/01/2011, 21h09
MichaelVDH

Mais en réalité ce qui me perturbe c'est le fait que tu n'envois pas réellement ton formulaire, tu récupères tes données via JS, donc le $_POST ne devrait pas fonctionner, du moins je pense donc si tu as ouvert une session et placé tes variables dedans, je pense que c'est normal

Si si, on peut choisir le type de donnés à renvoyer avec la fonction $.ajax présente dans jQuery.

Code:

1
2
3
4
5
6
7
8
9
 
$.ajax({
     type: "POST",
     url: "tonurl.php",
     data: "param1="+variable1+"&param2="+variable2,
     success: function(){
          alert("$.ajax success");
     }     
});

19/01/2011, 21h18
MichaelVDH

Comme je te l'ai dit jQuery et moi ca fait deux, de mon coté par exemple quand je fais :

Code:

objetXHR.open("post","page.php","true");

Donc il utilise la méthode POST mais pour récupérer mes variables dans mon script PHP je dois utiliser $_REQUEST

Si t'es motivé et que ca te tente de tester ca assouvirait ma curiosité je ne te cache pas :oops:
19/01/2011, 21h33
tonymx15

J'utilise seulement jQuery je ne connais pas ta façons mais tu devrais regardais des tutoriels sur jQuery tu gagneras beaucoup de temps pour développer tes sites...

C'est plus simple et très efficace.

C'est la méthode brut si je puis dire, juste pour te montrer
tu initialise selon le navigateur ton XMLHttpRequest

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function creationXHR() {
  var resultat=null;
  try {//test pour les navigateurs : Mozilla, Opéra, ...
	   resultat= new XMLHttpRequest();
    } 
     catch (Error) {
     try {//test pour les navigateurs Internet Explorer > 5.0
     	resultat= new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (Error) {
         try {//test pour le navigateur Internet Explorer 5.0
         	resultat= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (Error) {
            resultat= null;
         }
     }
  }
 return resultat;
}
 
function testerNavigateur() {   
	objetXHR = creationXHR();
	if(objetXHR==null) 
	{
		alert('Erreur : XMLHTTPREQUEST non pris en charge');
	}
}

Et après tu utilises l'objet que tu as créé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function listCat()
{
	var listCatXHR = creationXHR();
	listCatXHR.open("post", "php/annonce/listCat.php", true);
	listCatXHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	listCatXHR.send(null);
	document.getElementById("catTable").innerHTML = "<img src=img/chargeur.gif />";
	listCatXHR.onreadystatechange = function() { resultListCat(listCatXHR);}
}
 
function resultListCat(objetXHR)
{
	var result = objetXHR.responseText;
	document.getElementById("catTable").innerHTML = result;
}

Mais je testerai bien jQuery effectivement mais je sais pas pq j'ai envie de tout faire par mes soins :oops:

19/01/2011, 21h43
tonymx15

En effet, beaucoup de ligne pour peu de résultat... ça à l'air un peu compliquer pour moi. lol

Oui c'est vraie je me suis aussi dis ça quand j'ai commencé à apprendre jQuery, mais on m'a dit "si tu veux tous faire toi même, commence par programmer la fonction echo"... Et je me suis dis "en effet", on ne fais rien nous même des tas de fonction on été programmer, comme d'ailleur ton objet XMLHttpRequest qui à mon avis, je veux même pas savoir combien il lui faut de ligne de code pour qu'il marche.

:)
19/01/2011, 21h52
MichaelVDH

Je pense que le principal c'est qu'on arrive à être content de nos résultat quel que soit la méthode utilisée et par la suite s'améliorer encore et encore ;)