PHP : librairie GD et retouche d’images

Aujourd’hui on va parler développement, mais pas java ni android, développement PhP.

Je fais du Jeu de Rôles par forum, à Shadowrun, nous commençons une campagne où les PJ ont un compte sur le réseau social P2.0 et qu’ils devront « entretenir ». Plusieurs indices entrent en jeu pour donner un indice Global au compte, histoire de rentre le truc plus immersif, je veux que les PJ voient leur indice de façon simple claire et précise, tout en gardant la main dessus.

Hors sur le forum où j’opère en tant que MJ, les possibilités sont limités (pour qui n’est pas admin, ce qui n’est pas mon cas) :

J’ai la main sur :

• Les posts que j’écris
• Les posts que mes joueurs écrivent (je suis modérateur sur ma partie)
• Mon avatar
• Mon profil (mots clés sous l’avatar)
• Ma signature

Et malheureusement je n’ai pas la main sur les endroits qui semblent les plus intéressants pour ce que je veux faire :

• L’avatar de chaque PJ
• Le profil de chaque PJ
• La signature de chaque PJ

Je peux toujours demander aux joueurs de mettre à jour un de ces éléments si besoin, mais cela me gène car je ne suis pas certain d’avoir le répondant pour que tous les PJs soient à jour en même temps, ni même simplement que ce soit fait. Du coup, j’ai penser à demander aux joueur de ne faire qu’une modification : qu’ils fassent pointer l’url de leur avatar vers un url que je leur ai donné. Je retoucherais l’image et la mettrait à jour. Problème, je ne suis pas à l’aise avec les logiciel de retouches d’images et du coup ça me prend trop de temps. De plus sur GIMP, je n’ai pas trouvé un moyen simple de mettre à jour des calques contenant du texte sans avoir à rouvrir l’image et modifier chaque calque à la main. J’aurais aimé pouvoir lier l’image à un fichier texte ou xml où il irait chercher l’info à afficher.

Après y avoir réfléchi un moment, j’ai trouvé un compromis (et on en arrive enfin au rapport avec le titre du billet) : les avatars peuvent pointer vers un fichier .php si leur « headers » les identifie comme image. Et avec la librairie GD de PhP on peut faire de la manipulation d’image. Et là, je maîtrise plus.

Alors tout d’abord, le lien vers le tuto qui va bien : http://www.siteduzero.com/tutoriel-3-14597-creer-des-images-en-php.html (au passage : Le Site du Zéro fait partie de mes références quand je me pose une question en programmation, même sur un langage que je maîtrise comme PhP. Les tuto y sont très clairs et partent toujours de … zéro (!) du coup, au final fonctionnent toujours car aucune étape n’est passée sous silence sous prétexte « tout le monde sait ça, pas besoin d’en parler ».)

Première étape :

S’assurer que notre hébergement permet de manipuler les images avec PhP : Créer un fichier avec juste le phpinfo :

<?php phpinfo();

Et chercher si la librairie GD est activée (enable)

(Petite astuce si vous êtes en hébergement mutualisé chez OVH : pour que la suite fonctionne bien et que vous ne tombiez pas sur une erreur 500, assurez vous que vous êtes en php 5.)

Seconde étape :

Il faut que notre .php soit identifié comme image, il faut définir les headers qui vont bien :

header('Content-Type: image/png');

Là j’ai mis png, mais on peut aussi mettre jpeg si on veut.

Troisième étape : création d’une image à partir d’une autre

Mes PJ ont déjà leur avatar, il ne m’appartient pas de leur en imposer un, du coup, je vais me servir du leur comme base de l’image : $imagename valant « chemin/vers/image.png »

<?php header('Content-Type: image/png'); $imagename = "avatar_cyol.png"; //Générer l'image $image = @imagecreatefrompng($imagename); //Ici on mettra le reste du code qu'on va voir ensuite //Afficher l'image en tant que PNG imagepng($image);

Si j’avais eu un jpeg en source, ça aurait été la fonction imagecreatefromjpeg. Le deuxième lien qui va bien pour tout ce qui va suivre : http://www.php.net/manual/fr/ref.image.php (Il faut toujours lire la doc, même si c’est moins facile d’accès qu’un tutoriel, ça aide grandement pour aller plus loin que ce que peut proposer un tutoriel)

Image de base	L’image via PhP

Quatrième étape : création des crayons de couleur

Pour pouvoir écrire sur l’image il faut des « crayons », on les défini avec la fonction imagecolorallocate. (Quand je disais qu’on va plus loin avec la doc : en regardant imagecolorallocate, je trouve imagecolorallocatealpha qui propose en plus un argument pour gérer la transparence !)

Le premier argument est l’image que vous avez créé (dans mon cas en utilisant imagecreatefrompng), les 3 suivants sont le code RVB (Rouge Vert Bleu)

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

En l’état ils ne font rien, mais ils vont nous servir pour la suite. Si j’ai utilisé l’analogie des crayons de couleur ce n’est pas par hasard. Il faut maintenant les prendre pour écrire et dessiner !

(Note : je dis « En l’état ils ne font rien », ce n’est pas entièrement vrai, c’est non visible dans mon cas où je créer une image à partir d’une autre, mais le premier imagecolorallocate déclaré va aussi devenir la couleur de fond de l’image.)

Cinquième étape : écrire

Pour écrire, c’est la fonction imagestring qui va être utilisé. Le premier argument est toujours notre image, le second est la taille de la police : entre 1 petit et 5 grand. Il est possible de mettre d’autres valeurs qu’on aura défini auparavant avec d’autres fonctions, allez lire la doc, je n’ai pas utilisé.

Les arguments 3 et 4 sont les coordonnées X et Y du coin en haut à gauche de la zone d’écriture. Ces coordonnées sont en « nombre de pixel » par rapport au coin en haut à gauche de l’image qui est le 0,0

Enfin, les deux derniers argument sont respectivement : le texte à écrire et le Crayon de couleur qu’on veut utiliser !

imagestring($image, 2, 60, 75, "P2:", $noir); imagestring($image, 2, 59, 74, "P2:", $blanc);

Pourquoi j’écris 2 fois avec 1pixel de décalage ? Pour faire un léger effet Ombré !

Image de base	L’image via PhP	Sans ombré	Avec ombré	Final

Sixième étape : dessiner

On va dessiner des formes, moi ce qui m’intéresse c’est du rectangle plein pour faire des barres de progression, du coup j’utilise imagefilledrectangle($image, $x1, $y1, $x2, $y2, $couleur);

$x1, $y1 sont les coordonnées du coin haut gauche et $x2, $y2 les coordonnées du coin bas droit. $couleur est le Crayon de couleur qu’on veut utiliser. Vu que je veux un effet de barre de progression il me faut une première barre noire qui sera le 100% et par dessus une barre de couleur qui couvrira le %.

$x1 = 5;
$x2 = 30;
$y1 = 4;
$y2 = 6;
imagefilledrectangle($image, $x1+1, $y1+1, $x2+1, $y2+1, $noir);
//scores
$proximite  = 50;
$xpr = round(($x2*$proximite)/100)+ $x1;
imagefilledrectangle($image, $x1, $y1, $xpr, $y2 , $rouge);

Et voilà !

Note : Si j’ajoute $x1 à le $xpr calculé à partir de $x2 c’est pour bien prendre en compte qu’on ne part pas de 0 mais bien de 5.

Et voilà comment on peut faire de la manipulation d’image avec la librairie GD de PhP. Il existe évidemment plein d’autres fonctions pour faire plus de choses, mais là je ne me suis intéressé qu’à atteindre mon but de rajouter sur l’avatar de mes PJ à Shadowrun leur indice P2.

Vous pouvez voir le code source final.

Billets similaires

Code source de l’image finale du billet « PHP : librairie GD et retouche d’images » SRDice développement d’une application de dès Shadowrun pour Android JdR par forum, outils et sites pratiques en ligne