Chapitre 12. Manipulations d’images

Grâce à la librairie GD intégrée à PHP, il existe toute une série de fonctions permettant de manipuler, entre autres, des images au format JPEG (Joine Photographic Experts Group), PNG (Portable Network Graphics) et WBMP (Wireless BMP). Elles permettent par exemple de retourner directement une image créée au cours du script PHP.

Le choix du format se fait en fonction des images à générer. Le format JPEG est plutôt utilisé pour des images riches en couleurs et/ou en dégradés (comme les photos). C'est un codage avec compression et avec pertes. Le PNG est en train de remplacer le GIF (intègre le codage Lempel Ziv Welch protégé par un brevet via la société UNISYS – c'est donc un format propriétaire ET payant). Ce format permet une compression sans perte et s'utilise particulièrement pour des images contenant du texte, des tracés et des couleurs unies (boutons de sites web, bannières, etc.). Ce format permet la transparence et l'entrelacement que ne permet pas le JPEG. Les adeptes du GIF animé seront déçus, le PNG ne le permet pas. Un format appelé MNG qui le permettra est en cours de développement.
Enfin, le WBMP est spécifique aux périphériques sans fils. Il n'est pas encore généralisé.

Nous n’allons pas décrire ici toutes les (très) nombreuses fonctions qui nous demanderaient plus de temps que nous n’en n’avons mais nous allons décrire les principales qui nous servirons d’illustration afin de comprendre les mécanismes.

12.1 Séquence de génération d’une image

La génération d'une image se réalise en 4 étapes incontournables :
1. Création/Lecture de l'image (dimensions) qui servira de fond,
2. Ajout de dessins, formes, textes, actions sur ses paramètres (taille, correction gamma, etc.)
3. Génération de l'image – retour vers le navigateur (ou un fichier),
4. Suppression de l'image sur le serveur

Afin que votre navigateur sache que ce sont des images qu’il va recevoir, il est nécessaire que la première information qui lui est communiquée soit le type de l’image.

<?
header(“ Content-type: image/jpeg ”) ; // ATTENTION, respecter scrupuleusement la syntaxe
…
?>

12.2 Création d’une image

Une fois que le type de l’image à retourner au navigateur est défini, il faut indiquer la taille de l’image en pixel par la fonction :

• ImageCreate(largeur, hauteur). Celle-ci retourne l’identifiant d’une image. Cet identifiant sera utilisé par la plupart des fonctions graphiques. On pensera impérativement à libérer l’espace mémoire une fois que l’image crée est terminée (ImageDestroy(identifiant image)). La destruction d’une image n’implique pas sa disparition à l’écran puisqu'elle aura au préalable été retournée au navigateur.
• ImageCreateTrueColor(largeur, hauteur) : idem précédent, mais en vrai couleurs et pas sur une palette
• ImageCreateFrom[PNG|JPEG|GIF](« nom de l'image ») : permet de créer une image à partir d'une autre déjà existante (la création à partir GIF est autorisée – l'image retournée au navigateur ne sera pas un GIF).

12.3 Gestion des couleurs

Maintenant que nous connaissons à la fois le format et la taille de notre image, on peut choisir une couleur :

• ImageColorAllocate(image, rouge, vert, bleu).

Cette fonction alloue une couleur à l’image spécifiée. Chaque composant de couleur peut prendre une valeur entre 0 et 255. L’identifiant retourné servira dans d’autres fonctions pour faire référence à cette couleur.

• Imagegammacorrect(image, gamma_in, gamma_out);

Cette fonction permet de jouer sur la luminosité d’une image. Le taux se calcule par un ration entre la gamma_in et le gamma_out. Ainsi, si gamma_in = 1 et gamma_out = 2, l’image sera 2 fois plus claire. Un gamma_in inférieur à gamma_out l’assombrira.

12.4 Gestion des formes

• ImageFill (image, x début, y début, couleur) permet de remplir un espace vide par une couleur. Utilisée dès le départ, elle permet de donner un fond à une image. Attention, les coordonnées (0,0) correspondent au coin supérieur gauche.

• Image[Dashed]Line(image, x début, y début, x fin, y fin, couleur) trace une ligne (en pointillé pour ImageDashedLine)en partant des coordonnées (x début, y début) jusqu’à (x fin, y fin).

• Image[Filled]Polygon(image, tableau de points, nombre de points, couleur) autorise le dessin de polygone plein (ImageFilledPolygon) ou juste le contour (ImagePolygon). Les coordonnées sont contenues dans un tableau de points (2 à 2), le paramètre nombre de points indique combien de points sont à récupérer dans le tableau.

< ? imagefilledpolygon($image, array(100,10,50,60,150,60), 3 $color) ; // trace un rectangle ?>

• Image[Filled]Rectangle($image, x haut gauche, y haut gauche, x bas droite, y bas droite, couleur) trace un rectangle plein (ImageFilledRectangle) ou son contour (ImageRectangle),

Exemple : imagefill ($monimage, 0, 0, $macouleur) ;

• Plus simple, mais peut être plus utile (tracé de courbes par exemple), la fonction imagesetpixel(image, x, y, couleur) permet de placer un pixel dans la zone image.

12.5 Gestion des caractères/chaînes de caractères

Pour dessiner un caractère/chaîne de caractères dans une image :

• ImageChar($image, police de car., x, y, “ car ”, couleur). Le paramètre police correspond au numéro (de 1 à 5) d’une des 5 polices de caractères disponibles en standard dans PHP. Les coordonnées (x,y) réfèrent au coin supérieur gauche de la lettre.

• ImageCharUp fait de même mais avec des caractères orientés vers le haut.

• ImageString et ImageStringUp sont identiques à la précédente mais permettent le dessin de chaînes de caractères.

• ImageLoadFont(nom de la police de caractère) permet de charger de nouvelles polices de caractères. Ces polices peuvent ensuite être utilisées par exemple avec la fonction ImageString déjà vue précédemment.

< ?
$mapolice=imageloadfont(“ helvetica ”) ;
imagestring($image, $mapolice, 10,10, “ Coucou ”, $couleur ) ;
?>

12.6 Gestion des couleurs

• ImageColorAt(image, x, y) retourne l’index de la couleur spécifiée aux coordonnées x,y.
• ImageColorsTotal($image) retourne le nombre de couleurs dans l’image spécifiée.
• ImageColorTransparent(entier image, entier couleur) rend transparente la couleur spécifiée (ne fonctionne qu'avec le PNG).

< ?
imagefillrectangle($monimage, 30, 30, 70, 70, $macouleur) ; // dessine un rectangle dans une certaine
couleur
imagecolortransparent($monimage, $macouleur) ; // rend cette couleur transparente.
?>

• GetImageSize (nom de fichier) : cette fonction est disponible avec toutes les versions de php (ce qui n’est pas les cas avec les fonctions qui suivront). Le nom de fichier doit correspondre à l’un des formats suivants : GIF, JPEG, PNG. Elle retourne un tableau de 4 éléments : [0] : largeur en pixels, [1] : hauteur en pixels, [2] : type d’image (GIF = 1, JPEG = 2, PNG = 3), [3] : chaîne au format ‘HTML’ du type “ HEIGHT=### WIDTH=### ” utilisable dans une balise IMG.

• Les fonctions imageSX(image) et imageSY(image) permettent se connaître la largeur et la hauteur d’une image (souvent nécessaire pour connaître la taille d’une image chargée dynamiquement, par exemple avec ImageCreateFromPng).

12.7 Manipulation d’images

Pour aller plus loin avec la gestion des images, il faut savoir qu’il existe toute une panoplie de fonctions très utiles comme ImageCopyResampled qui permet de redimensionner des images (utilise pour générer des vignettes par exemple) ou imagecopy qui permet de copier une zone d’une image dans une autre. La liste exhaustive est sur http://fr2.php.net/manual/fr/ref.image.php.

• imagecopy($image_dest, $image_src, $dest_x, $dest_y, $src_x, $src_y, $src_largeur, $src_hauteur);

            Copie une zone d’image_src dans image_dest. La zone démarre en src_x et src_y, sur src_largeur et src_hauteur pixels dans image_dest à partie de dest_x, dest_x.

• imagecopymerge($image_dest, $image_src, $dest_x, $dest_y, $src_x, $src_y, $src_largeur, $src_hauteur, $opacite);
  

        Réalise la fusion (merge) de deux images tout en permettant une gestion de l’opacité – entier entre 0 et 100. Pour le reste, le fonctionnement est identique à la fonction imagecopy.

• imagecopyresampled ($image_dest, $image_src, $dest_x, $dest_y, $src_x, $src_y, $dest_largeur, $dest_hauteur, $src_largeur, $src_hauteur);
  

Permet de redimensionner tout ou partie rectangulaire d’image_src dans image_dest. Ca démarre en src_x, src_y vers dest_x, dext_y sur src_largeur, src_hauteur vers dest_largeur, dest_hauteur. Si l’on souhaite redimentionner une image entière dest_x = dest_y = src_x = src_y = 0. Si l’on ne veut pas étirer l‘image, il faut que le ratio dest_x/src_x = dest_y/src_y. Il vaut mieux privilégier cette fonction à ImageCopyResized qui s’utilise de façon analogue mais donne des résultats moins jolis et des effets d’escalier.

function redimage($img_src,$img_dest,$dst_w,$dst_h) { // Lit les dimensions de l'image $size = GetImageSize("$img_src"); $src_w = $size[0]; $src_h = $size[1]; // Teste les dimensions tenant dans la zone $test_h = round(($dst_w / $src_w) * $src_h); $test_w = round(($dst_h / $src_h) * $src_w); // Crée une image vierge aux bonnes dimensions // $dst_im = ImageCreate($dst_w,$dst_h); $dst_im = ImageCreateTrueColor($dst_w,$dst_h); // Copie dedans l'image initiale redimensionnée $src_im = ImageCreateFromJpeg("$img_src"); //ImageCopyResized($dst_im,$src_im,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h); ImageCopyResampled($dst_im,$src_im,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h); // Sauve la nouvelle image ImageJpeg($dst_im,"$img_dest"); // Détruis les tampons ImageDestroy($dst_im); ImageDestroy($src_im);

12.8 Récupération des images

Enfin, une fois les dessins réalisés, il est nécessaire de retourner au navigateur l'image ainsi générée dans le format défini :

• image[jpg||png|bmp](id image) : retourne l’image vers le navigateur.

Il est également possible d’enregistrer l’image dans un fichier (utile par exemple pour la génération de vignettes)

<? $fichier = 'images/vignettes/image.png'; imagepng($image, $fichier); ?>

Une fois l'image retournée vers la navigateur, celle-ci est devenue inutile sur le serveur. Aussi, afin de libérer ce dernier (n'oublions pas que nous sommes dans un environnement distribué et partagé et donc...nous ne sommes pas seuls !), on appliquera la fonction :

• imageDestroy(identifiant image) : supprime l'image du serveur...et pas dans le navigateur !