Introduction aux fonctions graphique de la library GD avec PHP

Nassim AB — Wed, 23 Apr 2008 10:40:00 +0200

Cette library de PHP permet d’effectuer des modifications sur les images. Ce n’est pas de la retouche d’image mais on peut, ce qui est régulièrement fait, par exemple ajouter dynamiquement du texte sur une image. Mais ce n’est qu’une simple utilisation de cette library.

Library ?

En effet, j’utilise library et non librairie par principe. Beaucoup traduisent « library » par « librairie » mais c’est un faux ami. Dans un souci de formalisme, j’utiliserais par la suite le mot « bibliothèque » qui est la réelle signification de « library ». Si j’utilise librairie par moment c’est la fatigue ^^.

Des exemples ?

Vu comme ça, il est assez difficile de trouver des exemples mais, pour ceux qui connaissent les outils tels que Nagios, Cacti, Zabbix ou encore Munin, les graphiques générés par ces outils de monitoring sont faits à partir de ces bibliothèques GD.

Pré-requis

Pour utiliser cette fonction vous aurez besoin au minimum :

d’un espace sur un serveur web.
que ce serveur web accepte PHP4 ou 5.
que le serveur que vous utilisez a cette fonction « GD » activée.

Note : Pour savoir si ces deux dernières conditions sont remplies, créez une page PHP contenant le code : < ? phpinfo() ; ?>

Et lancez la page. En théorie vous devriez avoir une partie dédiée nommée « GD ». Dans le cas contraire, une partie de ce billet est consacrée à l'installation de cette bibliothèque donc vous ne serez pas perdu(e)s !

Installation

Cette partie ne concerne que les gens qui possèdent leur propre serveur web (que ce soit EasyPHP, WAMP, Apache ou autre). Pour les autres, demandez à votre hébergeur, c'est plus simple. Donc il faut que vous trouviez votre php.ini et que vous l'éditiez de façon à décommenter la ligne (et donc activer) qui concerne l'extension GD:

Pour EasyPHP et WAMP : "extension=php_gd2.dll"
Pour Apache : "extension=gd.so"

Attention : Ne pas oublier de redémarrer Apache !

Bases à connaitre

La création d'image dynamique est simple en soi mais elle demande une certaine rigueur. Ici nous ne verrons que la création simple d'une image et l'écriture de texte sur celle ci.

Pour commencer il faut créer un fichier quelconque avec une extension *.php et l'éditer. Dedans, on place toujours un "header"
<? header ("Content-type: image/png"); ?>
Ce "chapeau" permet au navigateur de renvoyer une image PNG au lieu d'une page HTML classique. J'ai choisi PNG mais vous pouvez mettre JPEG à la place, ce choix n'a été fait que pour une question de qualité d'image.
Une fois notre "image initialisée", il nous faut renseigner les ressources que nous voulons afficher. Pour se faire, plusieurs solutions: -> Vous voulez générer une simple image de couleur noire et écrire "Texte" dessus:

@@<? header ("Content-type: image/png"); // Indication du type de fichier en sortie
$image_simple = imagecreate(300,500); // On crée une image de 300px sur 500px
$color = imagecolorallocate($image_simple, 0, 0, 0); // On défini la couleur de fond de l'image $image_simple
$color2 = imagecolorallocate($image_simple, 255, 255, 255); // On défini la 2eme couleur de fond de l'image $image_simple (la premiere seule s'affiche)
imagestring($image_simple, 10, 100, 20, "GD c'est cool !", $color2);
imagepng($image_simple); // On l'affiche !
?> @@ On a ici l'exemple d'une image qui s'affichera sans soucis ce qu'on lui a demandé.
Détaillons la fonction imagecolorallocate() quand même ^^.

En premier lieu l'image à colorier : $image_simple
Puis le taux de Rouge (R), Vert (G) et Bleu (B) : ces valeurs sont comprises entre 0 et 255

On a donc $variable = imagecolorallocate($Image,R,G,B); En ce qui concerne les couleurs le noir est défini sur 0,0,0 tandis que le blanc est sur 255,255,255 ce qui donnerait imagecolorallocate($image,255,255,255).
Pour avoir une plus grande plage de valeurs et de couleurs donc, je vous redirige vers un convertisseur ^^.
Enfin, ajouter du texte au dessus tout ça et ceci est géré par la fonction imagestring() On renseigne :

L'image sur laquelle on place le texte : $image_simple
La taille de la police : 10
La coordonnée en abscisse (X): 100
La coordonnée en ordonnée (Y) : 20
Le texte à écrire : "GD c'est cool !"
Couleur du texte : $color2

Voilà ! Vous avez votre image ! Pour la voir il suffit soit de lancer la page PHP, soit de l'intégrer dans une page web via
<img src="http://www.bashi.fr/post/image.php"/>
Oui, j'ai bien mis .php et non .png. C'est très bizarre au début mais, comme dit au début, le "header" fait comprendre au navigateur que la page chargée est une image au format PNG.

Astuces

Si vous voulez générer une image et l'enregistrer à un emplacement spécifique, il vous suffit de remplacer imagepng($image_simple);
Par: imagepng($destination, 'nom_de_limage.png');
Note: Encore une fois, vous pouvez remplacer png par jpeg et imagepng par imagejpeg donc =)
Pour mettre une image de fond, remplacez : $image_simple = imagecreate(300,500);
Par: $image_simple = imagecreatefromjpeg("nom_de_limage.jpg");
Le changement de JPG à PNG fonctionne toujours. Il est conseillé de privilégier le PNG pour une question de qualité d'image =)
Voila ! Maintenant vous savez générer des images avec du texte dessus !

Bientôt

Créer une image dynamique des statistiques de votre blog TitaXiuM (ou dotclear).
Créer une image dynamique de suivi de projet web.
Créer une signature dynamique de statut serveur.

bashi - Tag - Developpement