Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
💥 Les 22 & 23 novembre : Accès 100% GRATUIT
à la Bibliothèque Numérique ENI. Je m'inscris !
  1. Livres et vidéos
  2. Apprendre à développer un site web avec PHP et MySQL
  3. Les effets spéciaux sur une image
Extrait - Apprendre à développer un site web avec PHP et MySQL Exercices pratiques et corrigés (5e édition)
Extraits du livre
Apprendre à développer un site web avec PHP et MySQL Exercices pratiques et corrigés (5e édition)
1 avis
Revenir à la page d'achat du livre

Les effets spéciaux sur une image

La librairie GD

Pour générer une image en PHP, il faut utiliser des fonctions contenues dans la librairie GD. Une librairie est un fichier avec l’extension .dll contenant un grand nombre de fonctions PHP.

Pour activer cette librairie, il faut ouvrir le fichier php.ini (menu Configuration - PHP) puis enlever le point-virgule devant la ligne extension=php_gd2.dll. Il faut redémarrer votre serveur web ensuite (menu Redémarrer).

Attention : si vous faites héberger votre site chez un prestataire, il faut être certain que cette bibliothèque est active chez lui, ce qui n’est pas toujours le cas.

Création d’une image

1. Le header

Le header (en-tête) permet de spécifier au navigateur que la page PHP renvoie une image et non pas une page HTML. Il permet de spécifier aussi le type d’image générée : JPG ou PNG.

Si vous avez une image avec beaucoup de couleur comme une photo, il vaut mieux utiliser le format JPG, sinon il vaut mieux utiliser le format PNG qui gère la transparence.

Le code PHP à insérer au début de la page :

<?php 
header("Content-type: image/png"); 
?> 

2. Création d’une image vide

Pour créer une image vide, il faut utiliser la fonction imagecreate(). Cette fonction a deux paramètres : la largeur et la hauteur.

Par exemple :

<?php 
header("Content-type: image/png"); 
$image = imagecreate(300,150); 
?> 

Ce code crée une image de 300 x 150 pixels. La fonction imagecreatecolor() est équivalente à imagecreate() mais non limitée à 256 couleurs.

La variable $image est une ressource, c’est-à-dire un objet qui permet de manipuler l’image. Vous avez pu voir cette notion dans le chapitre Les fonctions et structures de contrôle avec la fonction fopen() à la section Ouverture et fermeture d’un fichier.

3. Création et affichage d’une image complète

Avant d’afficher l’image, vous allez...

Texte et couleur

1. La couleur

Cette fonction a été vue précédemment, c’est la fonction imagecolorallocate(). Elle met la couleur de fond dans l’image et stocke cette couleur dans une variable. Elle prend en paramètres la ressource et le code RGB.

Sa syntaxe est donc :

$couleur = imagecolorallocate ($ressource, $rouge, $vert, $bleu); 

Les variables $rouge, $vert et $bleu vont de 0 à 255. Vous pouvez trouver le code couleur correspondant à votre besoin dans des logiciels comme Paint ou Photoshop.

Cet exemple affiche un rectangle bleu :

<?php 
header("Content-type: image/png"); 
$image = imagecreate(300,150); 
$couleur_fond = imagecolorallocate($image, 0, 0, 255); 
imagepng($image); 
imagedestroy($image); 
?> 

2. Le texte

La fonction qui permet d’écrire du texte est imagestring(). Elle prend en paramètres la ressource, la taille de la police entre 0 et 5, les coordonnées x et y, la chaîne de caractères et la couleur de la chaîne.

Sa syntaxe est donc :

imagestring($ressource, $taille_police, $x, $y, $chaine, $couleur_chaine); 

Cet exemple affiche un texte noir dans un rectangle bleu clair :

<?php 
header("Content-type: image/png"); 
$image = imagecreate(300,150); 
$couleur_fond = imagecolorallocate($image, 110, 210, 220); //bleu clair 
$noir = imagecolorallocate($image, 0, 0, 0); 
imagestring($image...

Redimensionnement d’une image

Pour réaliser cela, il faut utiliser la fonction imagecopyresampled(). Cette fonction permet de redimensionner une image et de la placer dans une autre image à un point de coordonnées précis.

Cette fonction prend donc en paramètres :

  • L’image de destination : image créée avec imagecreate().

  • L’image source : image dont la miniature sera créée.

  • La position horizontale sur laquelle l’image miniature sera placée.

  • La position verticale sur laquelle l’image miniature sera placée.

  • La largeur de l’image miniature.

  • La hauteur de l’image miniature.

  • La largeur de l’image source : en effet, vous pouvez ne prendre qu’une partie de la source.

  • La hauteur de l’image source.

Dans l’exemple suivant, le code PHP permet de créer une miniature de l’image Koala.jpg et de la nommer mini_Koala.jpg :

<?php 
 
$image_source = imagecreatefromjpeg("Koala.jpg"); // La source est l'image 
                                                  // Koala.jpg 
$destination = imagecreatetruecolor(102, 77); // Création de la miniature 
                                              //...

Superposition d’images

Pour afficher une image sur une autre, il faut utiliser la fonction imagecopy() qui prend en paramètres :

  • L’image de destination.

  • L’image source : image à superposer.

  • La position horizontale de l’image de destination.

  • La position verticale de l’image de destination.

  • La position horizontale de l’image source.

  • La position verticale de l’image source.

  • La largeur de l’image source.

  • La hauteur de l’image source.

Dans l’exemple suivant, le code PHP permet de placer une petite image computer.png sur l’image Koala.jpg :

<?php 
header ("Content-type: image/jpeg"); 
 
// Création des deux images en tant qu'objet 
$source = imagecreatefrompng("computer.png"); // Le computer est la source 
$destination = imagecreatefromjpeg("Koala.jpg"); // Le Koala est la 
                                                 // destination 
 
$largeur_source = imagesx($source); //largeur de l'image source 
$hauteur_source = imagesy($source); //hauteur de l'image source 
$largeur_destination = imagesx($destination); //largeur de l'image 
                                              //...

Les formes

Les fonctions de la librairie GD vous permettent aussi de dessiner des formes telles que des cercles, des rectangles, des polygones…

Voici quelques-unes de ces fonctions avec $ressource, une image créée auparavant :

  • imagesetpixel($ressource, $x, $y, $couleur) : pixel de couleur $couleur aux coordonnées $x,$y.

  • imageline($ressource, $x1, $y1, $x2, $y2, $couleur) : ligne de couleur $couleur entre les coordonnées $x1,$y1 et les coordonnées $x2,$y2.

  • imagefill($ressource, $x, $y, $couleur) : rectangle depuis les coordonnées $x,$y jusqu’au coin inférieur droit de la ressource rempli par la couleur $couleur.

  • imagerectangle($ressource, $x1, $y1, $x2, $y2, $couleur) : rectangle de contour ayant la couleur $couleur entre les coordonnées $x1,$y1 et les coordonnées $x2,$y2.

  • imagefilledrectangle($ressource, $x1, $y1, $x2, $y2, $couleur) : rectangle avec le fond ayant la couleur $couleur entre les coordonnées $x1,$y1 et les coordonnées $x2,$y2.

  • imageellipse($ressource, $x, $y, $largeur, $hauteur, $couleur) : ellipse aux coordonnées du centre $x et $y, de largeur $largeur, de hauteur $hauteur et de contour ayant la couleur $couleur.

  • imagefilledellipse($ressource,$x, $y, $largeur, $hauteur, $couleur) : ellipse aux coordonnées du centre $xet $y, de largeur $largeur, de hauteur $hauteur et de fond ayant la couleur $couleur.

  • imagepolygon($ressource, $tableau_points,  $nombre_points...

Différents exemples

1. Exemple 1

Un exemple courant est d’afficher un graphique représentant le nombre de visites quotidiennes d’un site web. Ces données peuvent venir d’une base de données MySQL mais elles sont indiquées "en dur" dans l’exemple.

<?php 
header("Content-type: image/png"); 
$tableau_visites = array(520, 458, 642, 741, 254, 657, 356, 912, 259, 712); 
 
$largeurImage = 450; 
$hauteurImage = 400; 
$image = imagecreate($largeurImage, $hauteurImage); 
$blanc = imagecolorallocate($image, 255, 255, 255); 
$noir = imagecolorallocate($image, 0, 0, 0); 
$rouge = imagecolorallocate($image, 255, 0, 0); 
 
// trait horizontal pour représenter l'axe des jours 
imageline($image, 10, $hauteurImage-10, $largeurImage-10, 
$hauteurImage-10, $noir); 
// Affichage du numéro des jours 
for ($jour=1; $jour<=10; $jour++) { 
   imagestring($image, 0, $jour*40, $hauteurImage-10, $jour, $noir); 
} 
 
// trait vertical représentant le nombre de visites 
imageline($image, 10, 10, 10, $hauteurImage-10, $noir); 
 
// le nombre maximum de visites proportionnel à la hauteur de l'image 
$visites_maximum = 1000; 
// tracé des rectangles 
for ($jour=1; $jour<=10; $jour++) { 
   $hauteurRectangle...