Des fonctions encore plus puissantes

Des rectangles, des ellipses, des lignes… Ouais, bof. C'est tout ce qu'on peut faire ?

Bien sûr que non ! Il y a d'autres fonctions que je veux absolument vous montrer parce qu'elles permettent de réaliser des opérations bien plus complexes !

Nous allons apprendre à :

rendre une image transparente ;
mélanger deux images ;
redimensionner une image, pour créer une miniature par exemple.

J'espère que vous êtes encore en forme, ce serait dommage de s'endormir sur les fonctions les plus intéressantes.

Rendre une image transparente

Tout d'abord, il faut savoir que seul le PNG peut être rendu transparent. En effet, un des gros défauts du JPEG est qu'il ne supporte pas la transparence. Nous allons donc ici travailler sur un PNG.

Rendre une image transparente est d'une facilité déconcertante. Il suffit d'utiliser la fonction imagecolortransparent et de lui indiquer quelle couleur on veut rendre transparente. Cette fonction s'utilise comme ceci :

<?php

imagecolortransparent($image, $couleur);

Je vais reprendre l'exemple de l'image où j'ai écrit « Salut les Zéros ! » sur un vieux fond orange, et je vais y rajouter la fonction imagecolortransparent pour rendre ce fond transparent :

<?php

header ("Content-type: image/png");

$image = imagecreate(200,50);

$orange = imagecolorallocate($image, 255, 128, 0); // Le fond est orange (car c'est la première couleur)

$bleu = imagecolorallocate($image, 0, 0, 255);

$bleuclair = imagecolorallocate($image, 156, 227, 254);

$noir = imagecolorallocate($image, 0, 0, 0);

$blanc = imagecolorallocate($image, 255, 255, 255);

imagestring($image, 4, 35, 15, "Salut les Zéros !", $noir);

imagecolortransparent($image, $orange); // On rend le fond orange transparent

imagepng($image);

Et voilà, sur la figure suivante, le PNG transparent que ça nous donne.

Un texte dans un PNG

Sympa, non ? ;-)

Mélanger deux images

Ça, c'est un tout petit peu plus compliqué que de rendre une image transparente, mais bon je vous rassure : c'est loin d'être insurmontable quand même et ça en vaut la peine.

La fonction que je vais vous présenter permet de « fusionner » deux images en jouant sur un effet de transparence. Ça a l'air tordu comme ça, mais c'est en fait quelque chose de vraiment génial !

On peut s'en servir par exemple pour afficher le logo de son site sur une image.
Voyez le logo en figure suivante.

Logo

Et en figure suivante, l'image en question.

Image à marquer par le logo

La fonction qui permet de réaliser la fusion entre deux images est imagecopymerge.

Ce script est un peu plus gros que les autres, alors je préfère vous le donner tout de suite. Je vous expliquerai juste après comment il fonctionne.

<?php

header ("Content-type: image/jpeg"); // L'image que l'on va créer est un jpeg

// On charge d'abord les images

$source = imagecreatefrompng("logo.png"); // Le logo est la source

$destination = imagecreatefromjpeg("couchersoleil.jpg"); // La photo est la destination

// Les fonctions imagesx et imagesy renvoient la largeur et la hauteur d'une image

$largeur_source = imagesx($source);

$hauteur_source = imagesy($source);

$largeur_destination = imagesx($destination);

$hauteur_destination = imagesy($destination);

// On veut placer le logo en bas à droite, on calcule les coordonnées où on doit placer le logo sur la photo

$destination_x = $largeur_destination - $largeur_source;

$destination_y = $hauteur_destination - $hauteur_source;

// On met le logo (source) dans l'image de destination (la photo)

imagecopymerge($destination, $source, $destination_x, $destination_y, 0, 0, $largeur_source, $hauteur_source, 60);

// On affiche l'image de destination qui a été fusionnée avec le logo

imagejpeg($destination);

Vous trouverez en figure suivante le résultat que donne ce script.

Le logo a été intégré dans l'image

imagecopymerge est une fonction vraiment sympa, parce que vous allez maintenant pouvoir « copyrighter » automatiquement toutes les images de votre site si vous le voulez.

Cependant, le script utilisé ici est un petit peu plus complexe, et je crois que quelques explications ne seraient pas de refus.

Voici donc les points à bien comprendre.

Dans ce script, on manipule deux images : $source (le logo) et $destination (la photo). Les deux sont créées à l'aide de la fonction imagecreatefrompng (et fromjpeg pour la photo).
Il y a ensuite toute une série de calculs à partir des coordonnées et de la largeur et hauteur des images. J'imagine que ça a dû vous faire peur, mais c'est en fait très simple du moment qu'on sait faire une soustraction.

Notre but est de savoir à quelles coordonnées placer le logo sur la photo. Moi, je veux le mettre tout en bas à droite. Pour ça, j'ai besoin de connaître les dimensions des images. J'utilise les fonctionsimagesx et imagesy pour récupérer les dimensions du logo et de la photo. Ensuite, pour placer le logo tout en bas, il faut le mettre à la position $hauteur_de_la_photo - $hauteur_du_logo. On fait de même pour placer le logo à droite : $largeur_de_la_photo - $largeur_du_logo. Si j'avais voulu mettre le logo tout en haut à gauche, là, ça aurait été beaucoup plus simple : pas besoin de faire de calculs, vu qu'en haut à gauche les coordonnées sont (0, 0) !

Vient ensuite la fonction imagecopymerge, la plus importante. Elle prend de nombreux paramètres. Ce qu'il faut savoir, c'est qu'elle a besoin de deux images : une source et une destination. Elle modifie l'image de destination (ici, la photo) pour y intégrer l'image source. Cela explique pourquoi c'est$destination que l'on affiche à la fin, et non pas $source (le logo) qui n'a pas changé.

Les paramètres à donner à la fonction sont, dans l'ordre, les suivants.

L'image de destination : ici $destination, la photo. C'est l'image qui va être modifiée et dans laquelle on va mettre notre logo.
L'image source : ici $source, c'est notre logo. Cette image n'est pas modifiée.
L'abscisse à laquelle vous désirez placer le logo sur la photo : il s'agit ici de l'abscisse du point située à la position $largeur_de_la_photo - $largeur_du_logo.
L'ordonnée à laquelle vous désirez placer le logo sur la photo : de même, il s'agit de l'ordonnée du point sur la photo (ici, $hauteur_de_la_photo - $hauteur_du_logo).
L'abscisse de la source : en fait, la fonction imagecopymerge permet aussi de ne prendre qu'une partie de l'image source. Ça peut devenir un peu compliqué, alors nous, on va dire qu'on prend tout le logo. On part donc du point situé aux coordonnées (0, 0) de la source. Mettez donc 0 pour l'abscisse.
L'ordonnée de la source : de même pour l'ordonnée. Mettez 0.
La largeur de la source : c'est la largeur qui détermine quelle partie de l'image source vous allez prendre. Nous on prend toute l'image source, ne vous prenez donc pas la tête non plus et mettez$largeur_source.
La hauteur de la source : de même, mettez $hauteur_source.
Le pourcentage de transparence : c'est un nombre entre 0 et 100 qui indique la transparence de votre logo sur la photo. Si vous mettez 0, le logo sera invisible (totalement transparent), et si vous mettez 100, il sera totalement opaque (il n'y aura pas d'effet de « fusion »). Mettez un nombre autour de 60-70, en général c'est bien. ;-)

Concrètement, on peut se servir de ce code pour faire une page copyrighter.php. Cette page prendra un paramètre : le nom de l'image à « copyrighter ».

Par exemple, si vous voulez « copyrighter » automatiquement tropiques.jpg, vous afficherez l'image comme ceci :

À vous maintenant d'écrire la page copyrighter.php.
Si vous vous basez sur le script que je vous ai donné, ça ne devrait pas être bien long. Il faut juste récupérer le nom de l'image à charger (via la variable $_GET['image']). Arf, ça y est, je vous ai tout dit.

Redimensionner une image

C'est une des fonctionnalités les plus intéressantes de la bibliothèque GD, à mon goût. Ça permet de créer des miniatures de nos images.
Vous pouvez vous en servir par exemple pour faire une galerie de photos. Vous affichez les miniatures et si vous cliquez sur l'une d'elles, ça l'affiche dans sa taille originale.

Pour redimensionner une image, on va utiliser la fonction imagecopyresampled. C'est une des fonctions les plus poussées car elle fait beaucoup de calculs mathématiques pour créer une miniature de bonne qualité. Le résultat est très bon, mais cela donne énormément de travail au processeur.

Cette fonction est donc puissante mais lente. Tellement lente que certains hébergeurs désactivent la fonction pour éviter que le serveur ne rame. Il serait suicidaire d'afficher directement l'image à chaque chargement d'une page. Nous allons ici créer la miniature une fois pour toutes et l'enregistrer dans un fichier.

Nous allons donc enregistrer notre miniature dans un fichier (mini_couchersoleil.jpg, par exemple). Cela veut dire qu'on peut déjà retirer la première ligne (le header) qui ne sert plus à rien.

Comme pour imagecopymerge, on va avoir besoin de deux images : la source et la destination. Ici, la source c'est l'image originale et la destination, l'image miniature que l'on va créer.

La première chose à faire sera donc de créer une nouvelle image vide… Avec quelle fonction ? imagecreate ? Oui, c'est presque la bonne réponse.

Le problème voyez-vous, c'est que imagecreate crée une nouvelle image dont le nombre de couleurs est limité (256 couleurs maximum, en général). Or, notre miniature contiendra peut-être plus de couleurs que l'image originale à cause des calculs mathématiques.
On va donc devoir utiliser une autre fonction dont je ne vous ai pas encore parlé : imagecreatetruecolor. Elle fonctionne de la même manière que imagecreate mais cette fois, l'image pourra contenir beaucoup plus de couleurs.

Voici le code que je vais utiliser pour générer la miniature de couchersoleil.jpg, ma photo :

<?php

$source = imagecreatefromjpeg("couchersoleil.jpg"); // La photo est la source

$destination = imagecreatetruecolor(200, 150); // On crée la miniature vide

// Les fonctions imagesx et imagesy renvoient la largeur et la hauteur d'une image

$largeur_source = imagesx($source);

$hauteur_source = imagesy($source);

$largeur_destination = imagesx($destination);

$hauteur_destination = imagesy($destination);

// On crée la miniature

imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination, $hauteur_destination, $largeur_source, $hauteur_source);

// On enregistre la miniature sous le nom "mini_couchersoleil.jpg"

imagejpeg($destination, "mini_couchersoleil.jpg");

Avant, l'image ressemblait à la figure suivante. Grâce à imagecopyresampled, on a obtenu une version miniature (figure suivante).

L'image d'origine

L'image redimensionnée

Vous pouvez afficher ensuite l'image avec le code HTML :

On a créé notre miniature vide avec imagecreatetruecolor en dimensions réduites (200 imes 150). Je vous ai déjà expliqué les fonctions imagesx et imagesy, je n'y reviens pas. Voyons plutôt quels sont les paramètres de la fonction imagecopyresampled.

L'image de destination : c'est $destination, l'image qu'on a créée avec imagecreatetruecolor.
L'image source : l'image dont on veut créer la miniature ; ici, c'est notre couchersoleil.jpg qu'on a chargée avec imagecreatefromjpeg.
L'abscisse du point à laquelle vous placez la miniature sur l'image de destination : pour faire simple, on va dire que notre image de destination contiendra uniquement la miniature. Donc on placera la miniature aux coordonnées (0, 0), ce qui fait qu'il faut mettre 0 à cette valeur.
L'ordonnée du point à laquelle vous placez la miniature sur l'image de destination : pour les mêmes raisons, mettez 0.
L'abscisse du point de la source : ici, on prend toute l'image source et on en fait une miniature. Pour tout prendre, il faut partir du point (0, 0), ce qui fait que là encore on met 0 à cette valeur.
L'ordonnée du point de la source : encore 0.
La largeur de la miniature : un des paramètres les plus importants, qui détermine la taille de la miniature à créer. Dans notre cas notre miniature fait 200 pixels de large. On a stocké ce nombre dans la variable $largeur_destination.
La hauteur de la miniature : de même pour la hauteur de la miniature à créer.
La largeur de la source : il suffit d'indiquer la taille de notre image source. On a stocké cette valeur dans $largeur_source, donc on la réutilise ici.
La hauteur de la source : de même pour la hauteur.

Comme vous pouvez le voir, imagecopyresampled permet de faire beaucoup de choses, et en général on ne se servira pas de tout.

Plusieurs paramètres sont à 0, et ce n'est pas vraiment la peine de chercher à comprendre pourquoi (même si ce n'est pas bien compliqué). Basez-vous sur mon exemple pour créer vos miniatures, et le tour est joué.

En résumé

PHP permet de faire bien plus que générer des pages web HTML. En utilisant des extensions, comme la bibliothèque GD, on peut par exemple générer des images.
Pour qu'une page PHP renvoie une image au lieu d'une page web, il faut modifier l'en-tête HTTP à l'aide de la fonction header() qui indiquera alors au navigateur du visiteur l'arrivée d'une image.
Il est possible d'enregistrer l'image sur le disque dur si on le souhaite, ce qui évite d'avoir à la générer à chaque fois qu'on appelle la page PHP.
On peut créer des images avec GD à partir d'une image vide ou d'une image déjà existante.
GD propose des fonctions d'écriture de texte dans une image et de dessin de formes basiques.
Des fonctions plus avancées de GD permettent de fusionner des images ou d'en redimensionner.

Créé avec HelpNDoc Personal Edition: Outils facile d'utilisation pour créer des aides HTML et des sites web

Par mateo21 du site du zéro. Adapté par jean du LPH