Créer des images en PHP

1. On va voir ce que c'est un header.
2. Ensuite, on va créer l'image de base.
3. Enfin, on verra comment on affiche l'image quand on a fini.

Le header

• Soit on fait en sorte que notre script PHP renvoie une image (au lieu d'une page web comme on avait l'habitude). Dans ce cas, si on va sur la page http://www.monsite.com/testgd.php, ça affichera une image et non pas une page web !
• Soit on demande à PHP d'enregistrer l'image dans un fichier.

• JPEG : c'est un format très adapté pour les photos par exemple, car on peut utiliser beaucoup de couleurs.
• PNG : c'est le format le plus récent, très adapté dans la plupart des cas. En fait, à moins d'avoir affaire à une photo, le mieux est d'utiliser le PNG.
  Le PNG est en quelque sorte le "remplaçant" du format GIF.

1
2
3

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

Créer l'image de base

• On va commencer par créer une image vide.
  Pour créer une image vide en PHP, on utilise la fonction imagecreate (facile à retenir ça va ).
  Cette fonction est simple. Elle prend 2 paramètres : la largeur et la hauteur de l'image que vous voulez créer. Elle renvoit une information, que vous devez mettre dans une variable (par exemple $image).
  Ce qui nous donne :
  
  Code : PHP

  1 2 3 4

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

  
  Ici, nous sommes en train de créer une image de 200 pixels de large et 50 pixels de haut.
  $image ne contient ni un nombre, ni du texte. Cette variable contient une "image". C'est assez difficile à imaginer qu'une variable puisse "contenir" une image, mais c'est comme ça j'y peux rien
  
  
  On dit que $image est une "ressource". Une ressource est une variable un peu spéciale qui contient toutes les informations sur un objet. Ici, il s'agit d'une image, mais il pourrait très bien s'agir d'un PDF ou même d'un fichier que vous avez ouvert avec fopen. Tiens tiens, ça vous rappelle quelque chose ?
  
  
• Maintenant l'autre possibilité : créer une image à partir d'une image déjà existante.
  Cette fois, il y a 2 fonctions à connaître. Laquelle choisir ? Ca dépend du type de l'image que vous voulez charger :
  • JPEG : il faut utiliser la fonction imagecreatefromjpeg.
  • PNG : il faut utiliser la fonction imagecreatefrompng.
  
  Par exemple, j'ai une jolie photo de coucher de soleil qui s'appelle couchersoleil.jpg :
  
  
  
  
  Pour créer une nouvelle image en se basant sur celle-là, je dois utiliser la fonction imagecreatefromjpeg. Ca nous donnerait le code suivant :
  
  Code : PHP

  1 2 3 4

  <?php header ("Content-type: image/jpeg"); $image = imagecreatefromjpeg("couchersoleil.jpg"); ?>

Quand on a terminé : on affiche l'image

• JPEG : il faut utiliser la fonction imagejpeg.
• PNG : il faut utiliser la fonction imagepng.

• Afficher directement l'image : c'est la méthode que l'on va utiliser dans la plupart de ce chapitre. Quand la page PHP est exécutée, elle vous affiche l'image que vous lui avez demandé de créer.
  Vous avez toujours votre variable $image sous la main ? Parfait
  Alors voici le code complet que j'utilise pour créer une nouvelle image PNG de taille 200x50 et l'afficher directement :
  
  Code : PHP

  1 2 3 4 5

  <?php header ("Content-type: image/png"); // 1 : on indique qu'on va envoyer une image PNG $image = imagecreate(200,50); // 2 : on crée une nouvelle image de taille 200x50 // 3 : on fait joujou avec notre image (on va apprendre à le faire) imagepng($image); // 4 : on a terminé de faire joujou, on demande à afficher l'image ?>

  
  
  C'est bien joli, mais là on n'a qu'une image sous les yeux. Et si je veux mettre du texte autour ? Les menus de mon site ?
  
  En fait, on utilise une technique qui, j'en suis sûr, va pas mal vous surprendre. On va demander à afficher la page PHP comme une image.
  Donc, si la page PHP s'appelle "image.php", vous mettrez ce code HTML pour l'afficher depuis une autre page :
  <img src="image.php" />
  Incredible, isn't it ?
  Mais en fait, c'est logique quand on y pense ! La page PHP que l'on vient de créer EST une image (parce qu'on a modifié le header). On peut donc afficher l'image que l'on vient de créer depuis n'importe quelle page de votre site en utilisant simplement la balise <img />
  Le gros avantage de cette technique, c'est que l'image affichée pourra changer à chaque fois !
• Enregistrer l'image sur le disque : si, au lieu d'afficher directement l'image, vous préférez l'enregistrer sur le disque, alors il faut ajouter un paramètre à la fonction imagepng : le nom de l'image et éventuellement son dossier. Par contre, dans ce cas, votre script PHP ne va plus renvoyer une image (il va juste en enregistrer une sur le disque). Vous pouvez donc supprimer la fonction header qui ne sert plus à rien.
  Ce qui nous donne :
  
  Code : PHP

  1 2 3 4 5

  <?php $image = imagecreate(200,50); // on fait joujou avec notre image imagepng($image, "images/monimage.png"); // on enregistre l'image dans le dossier "images" ?>

  
  Cette fois, l'image a été enregistrée sur le disque avec le nom "monimage.png". Pour l'afficher depuis une autre page web, vous ferez donc comme ceci :
  <img src="images/monimage.png" />
  Ca, vous avez un peu plus l'habitude j'imagine
  Cette technique a l'avantage de ne pas nécessiter de recalculer l'image à chaque fois (votre serveur aura moins de travail), mais le défaut c'est qu'une fois qu'elle est enregistrée, l'image ne change plus. Vous allez comprendre l'intérêt de cette technique plus loin dans le chapitre.

• Manipuler les couleurs
• Ecrire du texte

Manipuler les couleurs

• Par exemple, si je dis que je mets 255 de bleu, ça veut dire qu'on met tout le bleu.
• Si je mets 100 de bleu, bah il y a un peu moins de bleu.
• Si je mets 0, alors là y'a plus du tout de bleu.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);

$orange = imagecolorallocate($image, 255, 128, 0);
$bleu = imagecolorallocate($image, 0, 0, 255);
$bleuclair = imagecolorallocate($image, 156, 227, 254);
$noir = imagecolorallocate($image, 0, 0, 0);
$blanc = imagecolorallocate($image, 255, 255, 255);

imagepng($image);
?>

Ecrire du texte

• $image : c'est notre fameuse variable qui contient l'image.
• $police : c'est la police de caractères que vous voulez utiliser. Vous devez mettre un nombre de 1 à 5 : 1 = petit, 5 = grand. Il est aussi possible d'utiliser une police de caractère personnalisée, mais il faut avoir des polices dans un format spécial qu'il serait trop long de détailler ici. On va donc se contenter des polices par défaut
• $x et $y : ce sont les coordonnées où vous voulez placer votre texte sur l'image.
  Et là vous vous dites : "Aïe, ça sent les maths " (comme quoi les maths ça sert ) Vous devez savoir que l'origine se trouve en haut à gauche de votre image. Le point de coordonnées 0, 0 représente donc le point tout en haut à gauche de l'image.
  Voici le schéma de notre image orange de tout à l'heure, qui est de taille 200x50 :
  
  
  
  Comme vous pouvez le voir, j'ai marqué en bleu les 4 points des côtés de l'image. 0, 0 se trouve tout en haut à gauche, et 200, 50 se trouve tout en bas à droite.
  Si vous avez juste un peu l'habitude des maths, ça ne devrait pas vous poser de problème.
  Sinon, vous me ferez le plaisir de réouvrir votre livre de géométrie page 125
• $texte_a_ecrire, c'est le... texte que vous voulez écrire. Non non, y'a pas de piège
• $couleur, c'est une couleur que vous avez créé tout à l'heure avec imagecolorallocate.

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

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);

$orange = imagecolorallocate($image, 255, 128, 0);
$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ér0s !", $blanc);

imagepng($image);
?>

• S'il est entre 8h et 20h, j'affiche l'heure sur un fond bleu.
• S'il est entre 20h et 8h du matin, alors j'affiche l'heure sur un fond noir.

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

<?php
header ("Content-type: image/png");
$image = imagecreate(200,50);

if (date("H") > 8 AND date("H") < 20) // Il fait jour
{
    $fond = imagecolorallocate($image, 143, 190, 241); // Fond bleu clair
    $couleur_texte = imagecolorallocate($image, 0, 255, 0); // Texte en vert
}
else // Il fait nuit
{
    $fond = imagecolorallocate($image, 0, 0, 0); // Fond noir
    $couleur_texte = imagecolorallocate($image, 255, 255, 255); // Texte en blanc
}

$heure = 'Il est ' . date('H\h i'); // On stocke l'heure et les minutes dans une variable

imagestring($image, 5, 40, 15, $heure, $couleur_texte); // On affiche l'heure dans la bonne couleur

imagepng($image);
?>

Vous pourriez améliorer ce script en chargeant une image de fond différente selon qu'il fait jour ou qu'il fait nuit. S'il fait jour vous chargez une photo de soleil en fond, et s'il fait nuit vous chargez une photo de Lune.
Vous allez voir que ça a de suite plus de classe !

• Rendre une image transparente
• Mélanger deux images
• Redimensionner une image, pour créer une miniature par exemple.

Rendre une image transparente

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

<?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ér0s !", $noir);
imagecolortransparent($image, $orange); // On rend le fond orange transparent

imagepng($image);
?>

Mélanger deux images

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?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("logosdz.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);
?>

• Dans ce script, on manipule 2 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 temps 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 la dimension des images. J'utilise les fonctions imagesx 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 c'est les coordonnées (0, 0) !
• Vient ensuite la fonction imagecopymerge, la plus importante. Elle prend tout plein de paramètres. Ce qu'il faut savoir, c'est qu'elle a besoin de 2 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 :
  
  1. 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.
  2. L'image source : ici $source, c'est notre logo. Cette image n'est pas modifiée.
  3. L'abscisse où 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
  4. L'ordonnée où 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).
  5. L'abscisse de la source : en fait, la fonction imagecopymerge permet aussi de ne prendre qu'une partie de l'image source. Ca 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.
  6. L'ordonnée de la source : de même pour l'ordonnée. Mettez 0.
  7. 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, donc vous prenez pas la tête non plus et mettez $largeur_source.
  8. La hauteur de la source : de même, mettez $hauteur_source.
  9. 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 de joli effet de "fusion"). Mettez un nombre autour de 60-70, en général c'est pas mal

Redimensionner une image

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

<?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');
?>

1. L'image de destination : c'est $destination, l'image qu'on a créé avec imagecreatetruecolor.
2. L'image source : l'image dont on veut créer la miniature, ici c'est notre couchersoleil.jpg qu'on a chargé avec imagecreatefromjpeg.
3. L'abscisse du point où 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.
4. L'ordonnée du point où vous placez la miniature sur l'image de destination : pour les mêmes raisons, mettez 0.
5. 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.
6. L'ordonnée du point de la source : encore 0.
7. 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.
8. La hauteur de la miniature : de même pour la hauteur de la miniature à créer.
9. 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.
10. La hauteur de la source : de même pour la hauteur.