8797 sujets

Développement web côté serveur, CMS

Librairie GD afficher image dynamiquement

Salut à toutes et à tous!

Je me retrouve face à un problème que je n'arrive pas à résoudre. J'ai créé mon script qui me permet de créé un fond avec un texte grâce à la librairie GD. J'aimerai que l'image puisse être créé via un formulaire: un champ pour le texte et un autre pour le fond.
Jusque là tout va bien. J'ai ma page avec mon formulaire qui renvoie vers le script, fabrique l'image et l'affiche. Le problème c'est quand je désire afficher le formulaire et la dernière image créé. Quelle est la méthode adéquate?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<form action="font_page.php" method="post" name="form" title="form" lang="fr">.
	
	<label for="fontColor">Couleur texte :</label>
    <select name="fontColor" id="fontColor">
      <option value="#ffffff" selected="selected">#ffffff</option>
      <option value="ffff00">#ffff00</option>
      <option value="ffff22">ffff22</option>
      <option value="ffff44">ffff44</option>
    </select>
    
	<label for="fontBg">Couleur fond :</label>
    <select name="fontBg" id="fontBg">
      <option value="#ffffff" selected="selected">#ffffff</option>
      <option value="ffff00">#ffff00</option>
      <option value="ffff22">ffff22</option>
      <option value="ffff44">ffff44</option>
    </select>

	<input name="submit" type="submit" value="Valider" />
    
</form>

<?php

if (isset($_POST['submit']) AND isset($_POST['fontColor']) AND isset($_POST['fontBg']))
{

	header("Content-type: image/png");
	
	//largeur et hauteur image en px
	$x = 200;
	$y = 50;
	
	// couleur fond et texte
	$hex_bg_color = $_POST['fontColor'];
	$hex_txt_color = $_POST['fontBg'];
	
	// variables fonction imagettftext
	$txt_size = '20';
	$angle = '0';
	$txt_x = '35';
	$txt_y = '30';
	$font_file = 'fonts/Cabaletta.ttf';
	$txt_sample = 'Voici un texte !';
	
	// Image en vraies couleurs
	$image = imagecreatetruecolor($x,$y);
	
	//couleur du background
	$red = hexdec(substr($hex_bg_color,0,2));
	$green = hexdec(substr($hex_bg_color,2,4));
	$blue = hexdec(substr($hex_bg_color,4,6));
	$bg_color = imagecolorallocate($image,$red,$green,$blue);
	imagefilledrectangle($image, 0, 0, $x, $y, $bg_color);
	
	//couleur du texte
	$rouge = hexdec(substr($hex_txt_color,0,2));
	$vert = hexdec(substr($hex_txt_color,2,4));
	$bleu = hexdec(substr($hex_txt_color,4,6));
	$txt_color = imagecolorallocate($image,$rouge,$vert,$bleu);
	
	putenv('GDFONTPATH='.realpath('.'));
	
	imagettftext($image, $txt_size, $angle, $txt_x, $txt_y, $txt_color, $font_file, $txt_sample);
	
	imagepng($image);
	imagedestroy($image);
}
?>

</body>
</html>


Je vous remercie d'avance pour vos réponses!
Modifié par livininchina (05 Aug 2012 - 02:37)
Tu as plusieurs solutions :

- Tu enregistres tes variables ds une BDD pour générer ton image et donc réafficher la dernière
- Tu enregistres ton image dans un répertoire, et tu affiches le dernier fichier de ce répertoire (donc ta dernière image créée)
- Tu enregistres ton image dans un répertoire, tu enregistres une entrée correspondante (nom de l'image par exemple) dans une BDD, tu récupères le dernier ID pour afficher ta dernière image.

@+
Merci PanPan50

Apparemment ça ne changera pas mon problème qui est d'afficher le formulaire générateur et l'image créée. On m'a conseillé ceci:

a écrit :
faire:
imagepng($image,"nom_de_fichier_image.png");
en lieu est place de 
imagepng($image);
et ajouter pour afficher l'image
<img src="nom_de_fichier_image.png">



J'ai fais des essais encore instables mais je parviens au moins à afficher l'image.
Dans mon code ci-dessous, le script m'affiche le formulaire ainsi que la dernière image créé (je ne sais pas d'où il la prend vu que je ne la stocke pas). Ce qui est très bien. Quand je complète mon formulaire et que je le valide, par contre j'ai plus rien qui s'affiche, juste le petit carré indiquant que l'image est manquante.

Maintenant si je supprimer la ligne header("Content-type: image/png"); le comportement est différent. Le script fonctionne, la validation du formulaire et affichage de l'image aussi, par contre les couleurs sont fausses, on dirait que ce sont les couleurs en négatifs.


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="colorPicker/css/style.css" rel="stylesheet" type="text/css" />
<link href="colorPicker/css/reset.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="colorPicker/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="colorPicker/js/jquery.simple-color.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
	$('.fontColor').simpleColor({
			cellWidth: 9,
			cellHeight: 9,
			border: '1px solid #333333',
			buttonClass: 'button',
			displayColorCode: false
	});	
	$('.fontBg').simpleColor({
			cellWidth: 9,
			cellHeight: 9,
			border: '1px solid #333333',
			buttonClass: 'button',
			displayColorCode: false
	});	
});
</script>
</head>
 
<body>
 
<form action="font_page.php" method="post" name="form" title="form" lang="fr">
    <label for="sampleText">Votre texte :</label>
    <input name="sampleText" type="text" size="20" />
    <label for="fontSize">Taille :</label>
    <select name="fontSize" id="fontSize">
      <option value="20" selected="selected">1</option>
      <option value="25">2</option>
      <option value="30">3</option>
      <option value="40">4</option>
    </select>
    <label for="fontColor">Couleur texte :</label>
    <input name="fontColor" class="fontColor" value="#ffffff"/>
    <label for="fontBg">couleur fond :</label>
    <input name="fontBg" class="fontBg" value="#000000"/>
    <input name="submit" type="submit" value="Valider" />
</form>
 
<p><img src="nom_de_fichier_image.png" /></p>
 
<?php
 
if (isset($_POST['submit']))
{
 
	header("Content-type: image/png");
 
	$x = 200;
	$y = 50;
	$hex_bg_color = $_POST['fontBg'];
	$hex_txt_color = $_POST['fontColor'];
 
	$txt_size = $_POST['fontSize'];
	$angle = '0';
	$txt_x = '35';
	$txt_y = '30';
	$font_file = 'fonts/CAC Pinafore.ttf';
	$txt_sample = 'Voici un texte !';
 
 
	$image = imagecreatetruecolor($x,$y);
 
	$red = hexdec(substr($hex_bg_color,0,2));
	$green = hexdec(substr($hex_bg_color,2,4));
	$blue = hexdec(substr($hex_bg_color,4,6));
	$bg_color = imagecolorallocate($image,$red,$green,$blue);
	imagefilledrectangle($image, 0, 0, $x, $y, $bg_color);
 
 
	$rouge = hexdec(substr($hex_txt_color,0,2));
	$vert = hexdec(substr($hex_txt_color,2,4));
	$bleu = hexdec(substr($hex_txt_color,4,6));
	$txt_color = imagecolorallocate($image,$rouge,$vert,$bleu);
 
	putenv('GDFONTPATH='.realpath('.'));
 
	imagettftext($image, $txt_size, $angle, $txt_x, $txt_y, $txt_color, $font_file, $txt_sample);
 
	//imagepng($image);
	imagepng($image,"nom_de_fichier_image.png");
 
	//imagedestroy($image);
}
?>
 
</body>
</html>


Mon script affichera plusieurs images à l'aide d'une boucle et prendra les données de la base de données. Mais ces images sont temporaires, elles sont générés uniquement pour affficher un aperçu et non dans un but de sauvegarde. Mon code sera modifié aussi, il n'est pas propre tel quel et je le séparerai en plusieurs parti avec MVC. Pour mes test tel quel ça me va puisque je cherche juste à afficher mon formulaire et l'image créée précédemment.

Qu'est ce que je ne fais pas comme il faut? Merci encore Smiley biggrin
Modifié par livininchina (05 Aug 2012 - 02:40)
Sujet clos
Aller à