Créer des images en PHP

1. Nous allons découvrir ce qu'est un header.
2. Ensuite, nous allons créer l'image de base.
3. Enfin, nous verrons comment on affiche l'image concrètement.

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

A partir d'une image vide

1
2
3
4

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

A partir d'une image existante

• JPEG : il faut utiliser la fonction imagecreatefromjpeg.
• PNG : il faut utiliser la fonction imagecreatefrompng.

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

1
2
3
4
5
6

<?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 s'amuse avec notre image (on va apprendre à le faire)
imagepng($image); // 4 : on a fini de faire joujou, on demande à afficher l'image
?>

1

<img src="image.php" />

Enregistrer l'image sur le disque

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"
?>

1

<img src="images/monimage.png" />

• 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

1
2
3

<?php
imagestring($image, $police, $x, $y, $texte_a_ecrire, $couleur);
?>

• $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 :
  
  
  
  
  
  
  Notez que les coordonnées de l'image s'arrêtent à (199, 49) et non à (200, 50) comme on pourrait s'y attendre. En effet, il ne faut pas oublier qu'on commence à compter à partir de 0 ! De 0 à 199 il y a bien 200 points.
  
  
  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 199, 49 se trouve tout en bas à droite.
• $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éros !", $blanc);

imagepng($image);
?>

• 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

<?php
imagecolortransparent($image, $couleur);
?>

 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éros !", $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("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);
?>

• 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 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 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 d'effet de "fusion"). Mettez un nombre autour de 60-70, en général c'est bien.

1

<img src="copyrighter.php?image=tropiques.jpg" />

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.