Manipuler des images avec PHP !

Si le titre de cette sous-partie ne vous a pas surpris c'est que vous n'avez pas de bons yeux.
En d'autres termes jusqu'ici vous téléchargiez et ensuite vous installiez des librairies mais cette librairie est une particularité, il vous faut seulement l'activer pour pouvoir l'utiliser, aucun téléchargement ne sera donc nécessaire.



Nous allons vérifier tout d'abord que cette librairie est activée sur votre version de EasyPhp, de WampServer ou sur votre système d'exploitation, si c'est le cas vous n'aurez plus besoin de l'installer et vous pourrez directement vous en servir.

C'est aussi simple que bonjour, pour vérifier si vous possédez cette librairie il faut créer un fichier .php que vous placerez à la racine de votre serveur ftp, si quand vous le lancez il y a un message d'erreur il faut alors lire ce qui va suivre pour activer la librairie GD sinon vous pouvez directement passer à la suite.

Code : PHP

Ce code va vérifier si la librairie GD est activée sur votre version de EasyPHP ou de WampServer.
Si ce n'est pas le cas je vous ai spécialement concocté un petit paragraphe dédié à l'activation de cette librairie.

Activer la librairie sous Linux

Si vous êtes sous Linux vous devez lire ce qui suit, si vous êtes sous un autre système d'exploitation vous devez lire ce qui va suivre après !

Pour activer votre librairie GD sous Linux il faut modifier un fichier nommé php.ini qui se situe généralement dans les répertoires suivants : /etc/php4/php.ini ou dans /etc/php.ini

Lorsque vous avez mis la main sur ce fichier il suffit de rajouter ces quelques lignes à la fin du fichier pour activer la librairie GD.

Code : Autre

Voilà GD est maintenant activé, si ça ne fonctionne pas c'est que vous avez dû faire une erreur pendant la configuration ou que vous n'êtes pas sous Linux !

Je vous invite à lire la suite pour savoir comment installer GD sous les autres systèmes d'exploitation : en gros avec EasyPHP ou WampServer.

Activer la librairie avec EasyPHP

Si vous avez EasyPHP ou que vous n'êtes pas sous Linux il faut lire ce paragraphe.
Il vous faut donc obligatoirement EasyPHP ou du moins WampServer pour activer la librairie si vous n'êtes pas sous Linux.

Pour activer la librairie il faut aller dans le répertoire où EasyPHP est installé, ensuite il faut ouvrir le dossier apache. Dans ce dossier se trouve un fichier nommé php.ini vous devrez également l'éditer.
Voici le contenu de ce fichier en temps normal :

Code : Autre

Il faut enlever le ; de la ligne 4 pour activer la librairie.
Voici le contenu du fichier après la modification :

Code : Autre

Activer la librairie avec WampServer

WampServer remplace EasyPHP qui lui est plus vieux, je vous conseille donc de l'avoir, cela ne vous coûte rien et il est mis à jour plus régulièrement que EasyPHP.
Vous pouvez télécharger WampServer sur le site officiel.
Pour activer GD sous Wamp, c'est très simple. Ouvrez WampServer, cliquez avec un clic gauche sur son icône dans la barre des tâches (celle en haut) et sélectionnez Configuration PHP / Extensions PHP puis mettez php_gd2.

À partir de maintenant et où que vous soyez GD est normalement activé, si ça ne marche pas c'est que vous avez dû vous tromper dans une des manipulations.

Nous allons maintenant nous en servir, tout ne fait que commencer !

C'est maintenant que GD va pouvoir nous montrer toute sa puissance.

On va commencer par créer notre première image en PHP !
Lancez votre éditeur de texte et c'est parti, je vous le dis tout de suite, si vous avez lu le cours de C/C++ de M@teo21 sur le SDL c'est un plus pour vous, vous allez retrouver à peu près les mêmes codes.

Nous allons donc commencer par donner une taille obligatoire en pixels à notre image et un format.
Le code PHP suivant va nous permettre de réaliser ceci :

Code : PHP

On donne donc une taille à notre image (ici 180*160) et on sélectionne le format d'image (ici png) via la fonction image suivi du format, ici imagepng. Vous pouvez changer le format de l'image comme bon vous semble mais attention à ce que le format soit valide et supporté par votre système d'exploitation sinon cela pourrait poser problème ! GD supporte normalement les principaux formats d'image mais pas encore l'HD si vous êtes sous Vista, ça va venir.

Si vous ouvrez maintenant votre fichier .php vous aurez une erreur, pas d'inquiètude c'est tout à fait normal, il vous faut spécifier un fichier .php que vous incluerez dans le fichier .php qui contient l'image, c'est dans un fichier nommé header.php que j'ai décidé de créer mes fonctions :

Code : PHP

Ce fichier devra être présent dans le fichier que vous venez de créer sans quoi ça ne marchera pas.



Revenons maintenant à notre fichier .php de tout à l'heure, nous allons rajouter le header qui correspond au format de l'image que nous voulons utiliser, voici ce qu'il faut rajouter au début de votre fichier pour que tout fonctionne correctement :

Code : PHP

N'oubliez pas de libérer la mémoire lorsque vous en avez fini via ce code :

Code : PHP

Vous pouvez également lire le tutoriel sur les jointures en cliquant ici pour obtenir plus d'informations sur la mémoire en programmation.

Enregistrer son image

Voilà c'est bien beau tout ça mais si on ne sait pas enregistrer son image ça ne sert à rien, heureusement GD est là.

Là encore une fois vous allez créer un fichier .php à part dans lequel vous placerez le code suivant :

Code : PHP

Ce sont des fonctions qui vont permettre d'enregistrer les images qui ont tel ou tel format.

Maintenant vous pouvez rajouter dans votre fichier de départ le code suivant pour que l'image s'enregistre sous le nom que vous lui aurez donné et dans le répertoire que vous aurez spécifié.

Code : PHP

Remplacez bien entendu ces informations par les bonnes.
En résumé notre premier fichier .php contient le code suivant :

Code : PHP

Testez ce code et normalement vous obtenez une fenêtre noire ou blanche à la taille que vous avez spécifiée, c'est à partir de maintenant que nous allons dessiner des formes et mettre de la couleur avec GD.

Jusqu'ici votre image ne ressemble à rien, vous obtenez normalement un grand carré noir ou blanc sans rien à l'intérieur, et si nous apprenions à dessiner dedans et à colorier ? Alors c'est parti.

Faire un fond

Avant de commencer à dessiner nous allons appliquer une couleur de fond à notre image avec la fonction imagecolorallocate qui prend deux arguments : le nom de votre variable (ici $monimage) et la couleur, cette fonction n'accepte que le type hexadécimal / RVB ou des entiers naturels compris entre 0 et 255 pour spécifier une couleur.



Le code PHP qui suit applique donc une couleur de fond à votre image.

Code : PHP

Ici on initialise 3 variables que l'on appelle respectivement $rouge, $vert et $bleu pour appliquer une couleur selon la méthode hexadécimal.
Vous pouvez changer votre méthode mais je vous conseille tout de même celle-ci car elle est pratique et il suffit de Paint pour trouver le code hexadécimal correspondant à chaque couleur, de plus on n'est pas limité on a le choix, on peut faire des fondus entre plusieurs couleurs ... bref les possibilités sont infinies.

Des couleurs transparentes !

GD sait tout faire même les couleurs transparentes pour tout vous dire, c'est pas chouette ça !
C'est grâce à la fonction imagecolorallocatealpha qui prend 5 arguments que nous allons pouvoir rendre transparent notre couleur et notre image !

Cette fonction prend comme argument : le nom de notre variable toujours, les trois couleurs, et une valeur comprise entre 0 et 127 qui indique le taux d'opacité et de transparence de votre image plus il est élevé plus ce sera transparent, plus il est réduit plus ce sera opaque, je vous conseille tout de même une valeur de 63 pour équilibrer le tout et rendre l'image potable, ha oui dernière chose, cette fonction ne prend en compte que des entiers, ne me mettez donc pas une valeur de 62,5 par exemple.

Voilà comment s'emploie ce code.
Vous aurez remarqué la présence de deux fonctions que nous n'avons pas encore étudiées, nous verrons cela plus tard.



Ne vous affolez pas, tout ce que nous avons fait jusque là c'est de déclarer notre couleur, nous allons maintenant l'appliquer avec la fonction imagefill.

Cette fonction prend 4 arguments : le nom de notre variable qui est toujours le même à savoir $monimage, les deux points d'origine d'où partira le remplissage ($x et $y) et enfin la couleur qui remplira notre image.



Voici comment s'emploie cette fonction dans notre fichier monimage.php :

Code : PHP

Voilà normalement si vous ouvrez votre image vous devrez voir un carré bleu clair et plus noir, vous venez de coder votre première image en PHP mais heureusement tout ne s'arrête pas là, on est loin de la perfection.



Nous allons maintenant apprendre à dessiner nos premières formes.

Dessiner

Nous allons apprendre premièrement à dessiner un simple trait.
La fonction qui permet de dessiner un trait se nomme imageline et prend 6 arguments : le nom de votre variable (maintenant on est habitué), les deux points d'origine du début du trait appellés respectivement $x_orig et $y_orig, les deux points d'origine de la fin de la fin du trait appellés respectivement $x_dest et $y_dest et enfin la couleur que prendra le trait.

Voici comment on emploie cette fonction :

Code : PHP

Comme $couleur vaut « bleu clair » si on met $couleur pour notre trait on ne le distinguera pas du fond, je vous conseille donc de créer une seconde variable $couleur qui a pour nom par exemple $couleurtrait ou de changer la couleur du fond de façon à le mettre noir pour différencier le trait du fond.

Voici ce que j'ai pour ma part :

Modifier la taille du trait

On va maintenant s'attaquer à la taille du contenu donc du trait.
Pour cela nous allons utiliser la fonction imagesetthickness qui prend 2 arguments : la variable de votre image comme d'habitude et l'épaisseur exprimée en pixels de votre trait.

On emploie cette fonction de cette façon :

Code : PHP

Remplacez ' size ' par une valeur en pixels comprise entre 0 et 127 par exemple.

Maintenant que vous savez dessiner un trait et le remanier à votre sauce vous saurez dessiner n'importe quelle forme, ce qui change c'est juste la complexité de la forme mais le principe reste le même.

Pour dessiner des autres formes il suffit de changer la fonction imageline par une des suivantes en fonction de vos besoins.

Fonction	Type de forme	Arguments que prend la fonction	Rendu
imagerectangle	Rectangle	les mêmes que pour le trait
imageellipse	Cercle	$monimage,$centre_x, $centre_y, $largeur, $hauteur, $couleur
imagearc	Arc de cercle	$monimage, $abscisse, $ordonnee, $largeur, $hauteur, $angle_debut, $angle_fin, $couleur
imagepolygon	Triangle	$monimage, $tableau_points, $nombre_points, $couleur

GD est incapable de gérer des formes plus complexes, toutefois vous pouvez les créer vous-même sous Paint et créer une fonction spécialement dédiée à votre forme.

Maintenant que l'on sait dessiner on va écrire car sinon ça risque d'être un peu vide.

Vous voulez mettre du texte sur votre image ? Eh bien qu'attendons-nous ?

Écrire verticalement et horizontalement

Il existe la fonction imagestring qui va nous permettre d'afficher du texte sur une image, celle ci prend 6 arguments : le nom de la variable, la grandeur de la police ($font) la valeur est comprise entre 1 et 5 (1 étant la plus petite police et 5 la plus grande), les deux points de repères ($x et $y on a l'habitude maintenant), la valeur du texte ($string) et enfin la couleur du texte avec $couleur.



Cette fonction s'emploie ainsi :

Code : PHP

Si je garde la même valeur pour $couleur mon texte est normalement écrit en bleu clair et horizontalement.



C'est tout simple il suffit de remplacer imagestring par imagestringup, essayez vous verrez par vous-même.

Voici ce que j'obtiens après avoir écrit mon texte horizontalement et mis pour valeur « rouge » à ma fonction $couleur et noir à ma fonction imagefill :



Vous aurez aussi remarqué que j'ai utilisé une police plutôt petite, en réalité j'ai mis une valeur de 2 pour $font.

Mais ce n'est pas tout et si on changeait un peu de police ?

Changer la police

GD ne sait charger que des polices au format .gdf bien qu'elles ne soient pas très répandues cela va nous suffir, en plus elles sont très belles, que demander de plus ?

Il va nous falloir initialiser la variable $font pour charger une police sur la fonction imageloadfont.
Elle ne prend qu'un seul argument pour une fois, le chemin vers le fichier qui contient la police en .gdf

On emploie cette fonction comme ceci :

Code : PHP

Ici on charge la police font.gdf, si vous ne l'avez pas téléchargez-la.
Pour ma part voici ce que j'obtiens après l'avoir appliquée :



Mais dans la plupart des cas ça ne marche pas, je vous conseille donc fortement l'utilisation d'une autre fonction qui va nous aider, en plus vous aurez le choix, vous ne serez plus limité aux .gdf.

La fonction imagettftext qui prend 8 arguments va nous aider. Vous l'avez déjà utilisée sans vous en rendre compte, eh oui, comme quoi des fois je vous en cache des choses.
Rappelez vous lorsque vous deviez dessiner un trait !

Bien, voici les 8 arguments : le nom de votre variable comme toujours, la taille de votre police avec $size cette fois ci, l'angle du texte exprimé en degrés, les deux points de repère $x et $y, la couleur du texte, le chemin vers le fichier qui contient la police et enfin le texte avec $text

Voici comment s'emploie la fonction :

Code : PHP

Remplacez donc ces valeurs par ceux qui vous conviennent



Dernière chose, si vous lancez votre image vous aurez normalement une erreur, c'est tout à fait normal car il faut utiliser une autre fonction qui définit l'emplacement de la police dans votre ordinateur, c'est la fonction putenv, elle aussi on l'a déjà utilisée lors du dessin du trait.
C'est une fonction un peu bizarre je ne veux pas vous embrouiller, recopiez la ligne et c'est tout.

Code : PHP

Sachez donc que cette ligne est obligatoire pour charger la police avec l'image.
Voici ce que j'ai obtenu en mettant une valeur de 55 sur $angle :



La police en PHP est donc un vaste sujet, si vous essayez de remanier votre code et d'essayer plusieurs combinaisons vous arriverez à des résultats très surprenants.

Maintenant on va finir ce chapitre avec quelques retouches pour terminer en douceur, la fin n'est pas loin, tenez bon.

Propriétés des images

Ouvrir une image

Nous allons avoir besoin de créer un fichier à part contenant des informations pour ouvrir des images, tout comme au début de ce tutoriel.
Appelez ce fichier comme bon vous semble et pensez à le mettre dans le même dossier que le fichier monimage.php

Code : PHP

Je ne mets pas toutes les extensions, à vous de rajouter les lignes dont vous avez besoin, de plus la fonction imagecreatefrom suivie du format de l'image sert à ouvrir des images.

Il suffira ensuite de rajouter cette ligne pour ouvrir votre image :

Code : PHP

Vous l'aurez remarqué, on ouvre une image ayant pour format .jpg
Il faut aussi déclarer votre variable $file si ce n'est pas encore fait, elle sert à indiquer où se trouve votre image, si vous ne la déclarez pas vous aurez une erreur.

Code : PHP

Ici votre image se situe à la racine de votre site dans le dossier images et s'appelle mon_image et a l'extension .jpg, pensez donc à modifier ces informations par les bonnes.

Récupérer la dimension d'une image

Maintenant que vous savez ouvrir une image, pourquoi ne pas connaître ses dimensions ? c'est toujours utile.

On utilisera la fonction getimagesize qui prend un seul argument, le nom de votre image.

On emploie cette fonction comme ceci :

Code : PHP

Vous aurez remarqué (ou non) que même sans GD cette fonction fonctionne (ça rime ) car on n'a pas besoin de la librairie pour l'utiliser.

Voici le code final pour obtenir les informations sur l'image :

Code : PHP

Les fonctions imagesx et imagesy nous servent respectivement à récupérer la largeur et la hauteur de l'image, et on utilise des echos pour afficher les informations.

On va maintenant voir comment redimensionner une image avant de conclure.

Redimensionner une image

Pour redimensionner une image on utilise la fonction imagecopyresized qui prend 10 arguments. On en a vu certains je ne vais pas tous vous les décrire.

On emploie cette fonction ainsi :

Code : PHP

Je n'ai pas besoin d'expliquer les arguments je suppose, c'est normalement clair.

On rajoute ces quelques lignes pour redimensionner l'image voulue :

Code : PHP

On ouvre l'image, on la redimensionne et on l'envoie redimensionnée dans le répertoire désiré, ensuite on libère la mémoire des deux fonctions avec imagedestroy, c'est très important.

Si vous ouvrez maintenant votre image redimensionnée le texte est moins élégant. Pour corriger ceci je vous conseille une autre fonction similaire mais qui va corriger ce petit problème : la fonction imagecopyresampled qui s'utilise de la même façon.
Je suppose que je n'ai nullement besoin de vous dire comment utiliser cette fonction, vous êtes des pros maintenant.

Voilà c'est enfin fini pour la manipulation des images, vous savez maintenant tout sur tout sur les images en PHP, vous pouvez faire une pause après ce long chapitre, mais vous pouvez aussi faire le Q.C.M.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<?php
header("Content-type: image/png");
$x = 50; 
$y = 100; 

$monimage = imagecreatetruecolor($x,$y);

$color = "BEDFFE";
$rouge = hexdec(substr($color,0,2)); 
$vert = hexdec(substr($color,2,4)); 
$bleu = hexdec(substr($color,4,6)); 

$couleur = imagecolorallocate($monimage,$rouge,$vert,$bleu);
imagefill($monimage,0,0,$couleur); 
imagepng($monimage); 
imagedestroy($monimage);
?>