41Mag - Tutoriel : une image PHP

Tutoriel : une image PHP

Ce tutoriel vous détaille comment faire une image PHP. Nous prendrons l’exemple d’un graphique PHP sous forme d’une image. Nous allons donc créer un graphique dynamique en PHP. Le but de ce tutoriel sera de vous expliquer comment créer un graphique PHP dynamique, à partir de différentes variables données, afin de générer une image PHP.

Des notions de PHP sont indispensables pour comprendre ce tutoriel sur les images PHP.

Plusieurs étapes seront nécessaire pour créer cette image PHP. Nous utiliserons la bibliothèque GD ainsi qu’une police de caractère, en l’occurrence Arial, qui devront se trouver dans le même dossier que le script PHP générant le graphique.

Pour résumé, nous allons créer un script qui fabriquera une image en PHP : un graphique. Ce script PHP sera appelé sur une page de votre site internet à l’endroit où vous souhaiterez afficher le graphique. Nous procéderons de la manière suivante :

  • Initialisation des valeurs à afficher sous forme de graphique
  • Création d’une image PHP et de sa couleur de fond
  • Initialisation des différentes variables de couleurs du graphique
  • Création des deux axes, ordonnées et abscisse
  • Légendes des axes, abscisse ordonnées
  • Graduation et légendes afin d’optimiser la lisibilité du graphique
  • Création des barres du graphique suivant les valeurs
  • Légendes des barres du graphique
  • Création entière de cette image PHP

Création de notre image PHP

image PHP

Nous allons créer un graphique PHP similaire à celui-ci. Vous noterez que notre script a généré une image PHP. Vous pouvez tester, faites un clic droit sur le graphique ci-dessous.

Mise en place et initialisation des variables PHP

Pour commencer, nous allons créer un fichier contenant notre script qui généra notre image PHP. Pour ce faire nous devons indiquer au navigateur que ce script devra être interpréter comme une image et non comme un ficher HTML. Pour ce faire nous allons utiliser la fonction Header.

1
header("content-type:image/png");

Le but de notre script étant de créer un graphique PHP dynamique, il sera donc différent suivant les variables récupérées. Dans cet exemple, nous allons les créer.

1
2
3
4
5
$valeur1 = 25;  //la valeur 1 equivault à 25%     
$valeur2 = 50;  //la valeur 2 equivault à 50%  
$valeur3 = 75;  //la valeur 3 equivault à 75%  
$valeur4 = 100; //la valeur 4 equivault à 100%  
$valeur5 = 85;  //la valeur 5 equivault à 85%

Nous allons maintenant créer notre image PHP

1
2
// Taille de l'image  
$image = @imagecreate (540, 220);

Cette image aura une taille de 540 pixels de largeur et de 220 pixels de hauteur. Nous allons maintenant définir sa couleur de fond.

1
2
// Couleur de fond  
$fond = ImageColorAllocate ($image, 208, 216, 213);

Un peu plus loin dans ce tutoriel, nous utiliserons une police de caractère pour afficher la légende de ce graphique. Bien que cette police soit souvent utilisée, vous devrez la télécharger et la mettre dans le même dossier que le script que nous sommes en train de créer. Téléchargez LA POLICE (Faire un clic droit et ‘enregistrer sous …’)

Abscisse et ordonnées

Les préparatifs étant réglés, nous allons maintenant créer les deux axes, à savoir l’abscisse et l’ordonnée. Nous allons définir les différentes couleurs employées pour les 2 axes, les lignes indicatives facilitant la lecture du graphique et la couleur des légendes.

1
2
3
4
// Couleur des axes, des lignes et des legendes  
$coul_axes = ImageColorAllocate ($image, 11, 62, 43);
$coul_lignes = ImageColorAllocate ($image, 227, 235, 232);
$coul_legendes = ImageColorAllocate ($image, 11, 62, 43);

Nous allons créer 2 traits qui représenterons les 2 axes, à savoir l’abscisse et l’ordonnée de notre graphique.

1
2
3
// Axe verticale et axe horizontale  
imageline ($image, 30, 30, 30, 190, $coul_axes);
imageline ($image, 30, 190, 520, 190, $coul_axes);

Il faut maintenant créer 2 polygones, ici des triangles, représentant la direction de ces deux axes.

1
2
3
4
5
6
// Création des polygone, ici un rectangle, d'ordonnes et d'abcisse  
$tab_fleche_ord = array(30, 30, 26, 34, 34, 34);
imagefilledpolygon ($image, $tab_fleche_ord, 3, $coul_axes);
 
$tab_fleche_abs = array(520, 190, 516, 186, 516, 194);
imagefilledpolygon ($image, $tab_fleche_abs, 3, $coul_axes);

La police de caractères téléchargé précédemment va nous être utiles pour la légende des axes d’abscisse et d’ordonnées.

1
2
3
// Legende de l'abscisse et de l'ordonnees  
imagettftext($image,10,0,5,20,$coul_legendes,"arial.ttf","Pourcentage");
imagettftext($image,10,0,480,180,$coul_legendes,"arial.ttf","Elements");

Nous allons ajouter des graduations. Dans notre script nous allons exprimer des pourcentages via un graphique (notre image PHP). Les différentes graduations seront donc naturellement 25, 50, 75 et 100%.

1
2
3
4
5
6
7
8
9
10
11
12
// L'axe des ordonnees, en haut à gauche, dispose d'une graduation de 0 à 20  
imageline ($image, 26, 155, 30, 155, $coul_axes);  // 5  
imageline ($image, 26, 120, 30, 120, $coul_axes);  // 10  
imageline ($image, 26, 85, 30, 85, $coul_axes);  // 15  
imageline ($image, 26, 50, 30, 50, $coul_axes);  // 20  
 
// Legende des graduation de l'ordonnes, en haut à gauche  
imagettftext($image,8,0,15,190,$coul_legendes,"arial.ttf","0");
imagettftext($image,8,0,9,157,$coul_legendes,"arial.ttf","25");
imagettftext($image,8,0,9,122,$coul_legendes,"arial.ttf","50");
imagettftext($image,8,0,9,87,$coul_legendes,"arial.ttf","75");
imagettftext($image,8,0,3,52,$coul_legendes,"arial.ttf","100");

Dans le but d’améliorer la lisibilité de notre graphique, nous allons tracer des lignes blanches à partir des graduation de l’axe des ordonnées tracé précédemment.

1
2
3
4
5
// Trait blanc permettant une meilleur lisibilite des graphique  
imageline ($image, 31, 155, 520, 155, $coul_lignes);
imageline ($image, 31, 120, 520, 120, $coul_lignes);
imageline ($image, 31, 85, 520, 85, $coul_lignes);
imageline ($image, 31, 50, 520, 50, $coul_lignes);

Légendes de notre image PHP et barres du graphique

La dernière étape consistera à créer des barres pour notre graphique en fonction des différentes valeur des variables. Comme précédemment, nous allons commencer par définir la couleur de ces barres.

1
2
3
4
5
6
// Couleur des barres du graphique   
$coul_barre1 = ImageColorAllocate ($image, 42, 124, 94);
$coul_barre2 = ImageColorAllocate ($image, 0, 90, 94);
$coul_barre3 = ImageColorAllocate ($image, 0, 38, 131);
$coul_barre4 = ImageColorAllocate ($image, 100, 38, 131);
$coul_barre5 = ImageColorAllocate ($image, 165, 38, 131);

Il ne nous reste plus qu’a dessiner les barres de notre graphique. La difficulté ici sera de définir la hauteur des barres. nous disposons de 140 pixels (190-50) pour afficher le maximum qui est de 100%.Comme les coordonnées vont de haut en bas, nous nous concentrerons sur la différences entre la valeur de la variable et la valeur maximale (100%). Le simple calcul suivant déterminera donc cette hauteur : ((100-$valeur)*1.4)+50.

1
2
3
4
5
6
// Création de la barres graphique relative aux valeurs 1, 2, 3, 4 et 5  
imagefilledrectangle ($image, 40, ((100-$valeur1)*1.4)+50, 110, 189, $coul_barre1);
imagefilledrectangle ($image, 120, ((100-$valeur2)*1.4)+50, 190, 189, $coul_barre2);
imagefilledrectangle ($image, 200, ((100-$valeur3)*1.4)+50, 270, 189, $coul_barre3);
imagefilledrectangle ($image, 280, ((100-$valeur4)*1.4)+50, 350, 189, $coul_barre4);
imagefilledrectangle ($image, 360, ((100-$valeur5)*1.4)+50, 430, 189, $coul_barre5);

Pour finaliser ce script, chaque barre devra posséder sa propre valeur en légende. Pour ce faire nous allons utiliser une couleur différente de la légende classique pour afficher cette valeur. Commençons par initialiser la couleur.

1
2
// Couleur BLANCHE indiquant la valeur de chaque barre  
$coul_valeur = ImageColorAllocate ($image, 255, 255, 255);

Maintenant, nous allons afficher sur cette image PHP la valeur de chaque barres.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Legende de la valeur1  
ImageTTFText ($image,10,0,65,180,$coul_valeur,"arial.ttf",$valeur1."%");
 
// Legende de la valeur2  
ImageTTFText ($image,10,0,142,180,$coul_valeur,"arial.ttf",$valeur2."%");
 
// Legende de la valeur3  
ImageTTFText ($image,10,0,222,180,$coul_valeur,"arial.ttf",$valeur3."%");
 
// Legende de la valeur4  
ImageTTFText ($image,10,0,299,180,$coul_valeur,"arial.ttf",$valeur4."%");
 
// Legende de la valeur5  
ImageTTFText ($image,10,0,383,180,$coul_valeur,"arial.ttf",$valeur5."%");

Il ne nous reste plus qu’à créer notre image PHP grâce à la fonction imagePng().

1
2
// Création de l'image  
imagePng ($image);

Le script entier de notre image en PHP

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<?php header("content-type:image/png");
 
 
    // Script de creation de graphique dynamique en PHP  
 
    $valeur1 = 25;  //la valeur 1 equivault à 25%     
    $valeur2 = 50;  //la valeur 2 equivault à 50%  
    $valeur3 = 75;  //la valeur 3 equivault à 75%  
    $valeur4 = 100; //la valeur 4 equivault à 100%  
    $valeur5 = 85;  //la valeur 5 equivault à 85%  
 
    // Taille de l'image  
    $image = @imagecreate (540, 220) ;
 
    // Couleur de fond  
    $fond = ImageColorAllocate ($image, 208, 216, 213);
 
    // Couleur des axes, des lignes et des legendes  
    $coul_axes = ImageColorAllocate ($image, 11, 62, 43);
    $coul_lignes = ImageColorAllocate ($image, 227, 235, 232);
    $coul_legendes = ImageColorAllocate ($image, 11, 62, 43);
 
    // Couleur des barres du graphique   
    $coul_barre1 = ImageColorAllocate ($image, 42, 124, 94);
    $coul_barre2 = ImageColorAllocate ($image, 0, 90, 94);
    $coul_barre3 = ImageColorAllocate ($image, 0, 38, 131);
    $coul_barre4 = ImageColorAllocate ($image, 100, 38, 131);
    $coul_barre5 = ImageColorAllocate ($image, 165, 38, 131);
 
     // Axe verticale et axe horizontale  
    imageline ($image, 30, 30, 30, 190, $coul_axes);
    imageline ($image, 30, 190, 520, 190, $coul_axes);
 
    // Création des polygone, ici un rectangle, d'ordonnes et d'abcisse  
    $tab_fleche_ord = array(30, 30, 26, 34, 34, 34);
    imagefilledpolygon ($image, $tab_fleche_ord, 3, $coul_axes);
 
    // Création d'un polygone, ici un rectangle, d'abscisse (en bas à droite)  
    $tab_fleche_abs = array(520, 190, 516, 186, 516, 194);
    imagefilledpolygon ($image, $tab_fleche_abs, 3, $coul_axes);
 
    // Legende de l'abscisse et de l'ordonnees  
    imagettftext($image,10,0,5,20,$coul_legendes,"arial.ttf","Pourcentage");
    imagettftext($image,10,0,480,180,$coul_legendes,"arial.ttf","Elements");
 
 
    // Trait blanc permettant une meilleur lisibilite des graphique  
    imageline ($image, 31, 155, 520, 155, $coul_lignes);
    imageline ($image, 31, 120, 520, 120, $coul_lignes);
    imageline ($image, 31, 85, 520, 85, $coul_lignes);
    imageline ($image, 31, 50, 520, 50, $coul_lignes);
 
    // L'axe des ordonnees, en haut à gauche, dispose d'une graduation de 0 à 20  
    imageline ($image, 26, 155, 30, 155, $coul_axes);  // 5  
    imageline ($image, 26, 120, 30, 120, $coul_axes);  // 10  
    imageline ($image, 26, 85, 30, 85, $coul_axes);  // 15  
    imageline ($image, 26, 50, 30, 50, $coul_axes);  // 20  
 
    // Legende des graduation de l'ordonnes, en haut à gauche  
    imagettftext($image,8,0,15,190,$coul_legendes,"arial.ttf","0");
    imagettftext($image,8,0,9,157,$coul_legendes,"arial.ttf","25");
    imagettftext($image,8,0,9,122,$coul_legendes,"arial.ttf","50");
    imagettftext($image,8,0,9,87,$coul_legendes,"arial.ttf","75");
    imagettftext($image,8,0,3,52,$coul_legendes,"arial.ttf","100");
 
    // Création de la barres graphique relative aux valeurs 1, 2, 3, 4 et 5  
    imagefilledrectangle ($image, 40, ((100-$valeur1)*1.4)+50, 110, 189, $coul_barre1);
    imagefilledrectangle ($image, 120, ((100-$valeur2)*1.4)+50, 190, 189, $coul_barre2);
    imagefilledrectangle ($image, 200, ((100-$valeur3)*1.4)+50, 270, 189, $coul_barre3);
    imagefilledrectangle ($image, 280, ((100-$valeur4)*1.4)+50, 350, 189, $coul_barre4);
    imagefilledrectangle ($image, 360, ((100-$valeur5)*1.4)+50, 430, 189, $coul_barre5);
 
        // Couleur BLANCHE indiquant la valeur de chaque barre  
    $coul_valeur = ImageColorAllocate ($image, 255, 255, 255);
 
    // Legende de la valeur1  
    ImageTTFText ($image,10,0,65,180,$coul_valeur,"arial.ttf",$valeur1."%");
 
    // Legende de la valeur2  
    ImageTTFText ($image,10,0,142,180,$coul_valeur,"arial.ttf",$valeur2."%");
 
    // Legende de la valeur3  
    ImageTTFText ($image,10,0,222,180,$coul_valeur,"arial.ttf",$valeur3."%");
 
    // Legende de la valeur4  
    ImageTTFText ($image,10,0,299,180,$coul_valeur,"arial.ttf",$valeur4."%");
 
    // Legende de la valeur5  
    ImageTTFText ($image,10,0,383,180,$coul_valeur,"arial.ttf",$valeur5."%");
 
 
 
 
    // Création de l'image  
    imagePng ($image);
 
 
 
?>

Pour afficher cette image PHP générer grâce à notre script, il vous faudra juste ajouter dans la page, où vous souhaitez afficher l’image en PHP, la ligne de code suivante :

1
<img src="nom_du_script.php" alt="graphique PHP dynamique" title="graphique PHP" />

Voila, vous savez maintenant comment créer et afficher une image en PHP. Pour toutes questions, les commentaires sont faits pour ça …

Article du même thême : .

  • http://www.facebook.com/frederic.terrasse Frédéric Terrasse

    Bonjour,

    Le script ne fonctionne pas chez moi il affiche seulement (graphique PHP dynamique)

    • Fraja

      Bonjour, juste besoin de charger une police ttf et de la placer dans le même répertoire si tu ne change pas le chemin.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.