> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > PHP > Points particuliers (PHP) > Créer un avatar aléatoire > Lecture du tutoriel

Créer un avatar aléatoire

Par

SpaceFox

Mise à jour : 04/09/2010

Difficulté : Facile Facile

20 visites depuis 7 jours , classé 743/777

Vous désirez avoir un avatar aléatoire, différent à chaque affichage, comme le mien ?
Vous estimez que les dizaines de scripts sur le sujet que l'on trouve sur Internet sont horriblement compliqués pour quelque chose qui a l'air simple ?

Ce tutoriel est là pour vous !

Retour en haut

Sommaire du tutoriel :

Pourquoi ce tuto ?
Un avatar aléatoire et un serveur qui dort : renommer ses fichiers
L'avatar semi-aléatoire et le cache
Deux avatars en un
Feinter les protections : faire croire que son image aléatoire est une vraie image

Retour en haut

Pourquoi ce tuto ?

Les avatars aléatoires, c'est-à-dire qui affichent une image différente à chaque rafraîchissement (ou selon tout autre paramètre) sont très à la mode, et on trouve énormément de scripts sur Internet qui permettent d'en faire.

Malheureusement, la très grande majorité de ces scripts sont des horreurs finies, des choses de dizaines et dizaines de lignes, avec des variables dans tous les sens, des constantes, etc.
À la limite, le problème n'est pas tellement là : on colle le script, il marche, on n'a pas besoin de savoir comment il fonctionne.

Non, le problème est que beaucoup de ces scripts utilisent des fonctions beaucoup trop lourdes pour le serveur par rapport à ce dont on a réellement besoin.
On commence avec un petit array(), puis on passe à glob(), et on finit par utiliser l'extension GD pour afficher une image qui se trouve à l'identique sur le disque dur… GD est une librairie très pratique, mais très lourde en calculs pour un serveur.
Et comme on va le voir, on n'en a pratiquement jamais besoin.

La plupart des avatars aléatoires que je vois nécessitent en tout et pour tout 3 lignes de code, indentation comprise, mais à une petite condition. Nous allons voir tout de suite comment faire.

Retour en haut

Un avatar aléatoire et un serveur qui dort : renommer ses fichiers

L'avatar aléatoire le plus simple du monde

La solution pour avoir un avatar aléatoire super simple, et super léger pour le serveur, est tellement simple qu'on se demande pourquoi personne ne la choisit : il suffit de renommer ses images. Ou plus exactement de les numéroter. Démonstration.

L'avatar aléatoire aux fichiers à noms « normaux »

L'algorithme de cet avatar est le suivant :

Code : Autre

— Lister tous les fichiers du répertoire où il y a les images à afficher.
— Compter le nombre d'items de la liste.
— Choisir un nombre aléatoire, et récupérer le nom du fichier correspondant.
— Afficher le fichier choisi.

Et encore, c'est un cas simple : je pars du principe que toutes les images dont on a besoin sont sagement rangées dans un même dossier, où il n'y a que des images et que celles que l'on veut afficher.
De plus, il suffit qu'il y ait un caractère spécial un peu merdique, un fichier parasite qui n'a rien à faire dans le dossier, et hop ! plus rien ne fonctionne correctement.
En outre, la recherche des noms de fichiers est un processus lent (il faut faire un accès disque).

L'avantage de cette solution est qu'elle est extrêmement simple à faire fonctionner, une fois que le script est fait : on uploade le script, on uploade les fichiers, ça marche. Si on veut changer les images affichées, on change les images et ça marche tout seul, une fois de plus, et quel que soit le format de l'image.

Solution à images nommées

Ici, toutes nos images que l'on veut afficher s'appellent avatar-1.jpg à avatar-n.jpg, où n est le nombre d'images.

Dans ce cas, l'algorithme devient le suivant :

Code : Autre

1 2	— Choisir un nombre i entre 1 et n. — Afficher l'image avatar-i.jpg.

Simple, efficace.

De plus, c'est totalement insensible aux autres fichiers qui pourraient traîner dans le répertoire.
L'inconvénient est qu'il faut renommer ses fichiers, et changer le nombre n dans le script à chaque fois qu'on ajoute ou enlève des images à notre avatar.

Afficher l'image choisie

Là encore, on voit beaucoup d'horreurs.
La technique la plus répandue consiste à dire que notre fichier PHP renvoie une image (grâce aux headers()), puis à charger l'image dans le fichier pour l'afficher.

Il y a beaucoup plus simple. Réfléchissons un peu.

On veut afficher une image qui se trouve sur le serveur.
On connaît le nom de cette image.

La solution consiste donc à dire au navigateur : « L'image que tu veux afficher, elle se trouve à cette adresse. »
Est-ce qu'il existe une fonction qui nous permet de faire ça ?
Oui, toujours notre fameuse fonction headers() !

header(location: URL); indique au navigateur que la ressource que l'on cherche est en fait à l'URL que l'on a indiquée. Voici la documentation si vous êtes intéressés.

... et du fond des cieux vint le Script

Maintenant, vous devez être capables de faire votre avatar aléatoire en trois lignes de code, en tout et pour tout. Voici la solution (ici avec 21 images) :

Code : PHP

1
2
3

<?php
	header('Location: avatar-'.mt_rand(1,21).'.jpg');
?>

Le fichier .php ne contient absolument rien d'autre.

Notez que l'on peut encore réduire ce script à une seule ligne :

Code : PHP

1	<?php header('Location: avatar-'.mt_rand(1,21).'.jpg'); ?>

L'image ci-contre fonctionne exactement sous ce principe. Le script PHP est à l'adresse suivante :
http://kisai.info/avatar/avatar_renard.php
Cliquez sur le lien, ou copiez-collez-le dans une autre fenêtre, et vous verrez dans la barre d'URL l'adresse se muer en la véritable adresse de l'image, tandis qu'un superbe renard s'affichera dans votre navigateur : tout fonctionne.

J'imagine d'ici que certains d'entre vous avaient utilisé des variables telles que $nombreAleatoire ou $nbImagesTotal pour stocker respectivement le nombre tiré, ou le nombre d'images total. C'est totalement inutile.

Ce sont des variables utilisées une seule fois, on peut donc les remplacer directement par leur valeur.
Le concept de « variable utilisée une seule fois pour rendre le code plus lisible » peut se comprendre sur un projet de plusieurs centaines de lignes, mais là… non.

Avantages de cette méthode

Le serveur ne fait rien, à part tirer un nombre aléatoire.
On profite du cache du navigateur : si l'on demande l'affichage de avatar-2.jpg et que le navigateur l'a déjà en cache, il n'a pas besoin de la recharger ; alors qu'avec un script sans redirection, il sera toujours obligé de charger l'image.

Bien, et si on compliquait un peu tout ça ?

Retour en haut

L'avatar semi-aléatoire et le cache

D'accord, je vois le concept. Mais si je veux faire quelque chose de plus compliqué, avec un traitement sur l'image ?

L'idée de base est de faire le traitement à chaque fois. Sauf que qui dit « traitement », dit en général « librairie GD », donc lourd… C'est là qu'intervient le système de cache !

Dans la suite, je considère que vous savez vous servir de la librairie GD de PHP. Si vous ne savez pas, foncez donc lire le tuto de M@teo21 à ce sujet !

L'avatar en deux (ou plusieurs) parties

Imaginons que j'aie toute une collection de charmantes demoiselles, dont vous avez un exemple sur votre gauche, et que je veuille en faire mon avatar.
Rien de plus simple, je prends la technique indiquée au-dessus.

Sauf que… je veux aussi que mon pseudo apparaisse avec une police classe, en gros, en dessous de mon avatar. Très exactement de la façon dont vous pouvez le voir à droite. Eh bien là, ma méthode ne marche plus !
Il va falloir combiner les deux images, mettre la demoiselle au-dessus du pseudo. Problème : l'image de la demoiselle est aléatoire… Il va donc falloir le faire pour chaque demoiselle. Tout ça sent l'utilisation de PHP GD à plein nez, donc plein de calculs et de difficultés pour votre pauvre serveur.

Combiner les deux images

Mes images de demoiselles font 150 x 150 pixels, le pseudo 150 x 50 pixels, le tout pour une image finale de 150 x 200 pixels.
J'ai 72 demoiselles différentes, dans les fichiers haut-1.png à haut-72.png ; et mon pseudo est dans le fichier bas.png.

Si vous connaissez un minimum PHP GD, ça ne pose aucun problème. La variable $haut va nous servir un peu plus loin, c'est sa raison d'être.
Le code qui permet de combiner les deux images ressemble donc à ceci :

Code : PHP

<?php
// Tirage de l'image aléatoire
$haut = mt_rand(1, 72);

// L'image finale
$iFinale = imagecreatetruecolor(150,200);

// Récupération des images sources
$iHaut = imagecreatefrompng('haut-'.$haut.'.png');
$iBas = imagecreatefrompng('bas.png');

// Collage de l'image haute dans l'image finale
imagecopy($iFinale,
	  $iHaut,
	  0, 0,
	  0, 0,
	  150, 150);
// Collage de l'image basse dans l'image finale
imagecopy($iFinale,
	  $iBas,
	  0, 150,
	  0, 0,
	  150, 50);
?>

Il ne me reste plus qu'à afficher l'image $iFinale.

Sauf que… Il n'y a que moi que ça chagrine, de refaire les calculs à chaque fois ? Après tout, on n’a que 72 images possibles, or notre avatar va être affiché bien plus que 72 fois…

Cachez-moi ces images que je ne saurais voir

Et si on faisait une bonne fois pour toutes les calculs, et qu'on affichait une image au hasard parmi les images déjà calculées ? Elles ne vont pas changer, ces images, maintenant qu'on les a calculées !

C'est exactement ça. Et là, deux solutions s'offrent à vous.

Vous faites toutes vos images à la main, et utilisez la première solution. Sauf qu'on est feignants, et qu'on ne veut pas faire d'images à la main.
Vous vérifiez si l'image calculée est disponible. Si oui, on l'affiche. Si non, on la calcule, on l'enregistre, et on l'affiche.

Récapitulons : j'ai toujours mes 72 images de demoiselles, mon pseudo, et j'ai à ma disposition un dossier intelligemment appelé « cache ».
De plus, PHP GD dispose d'une fonction qui permet d'enregistrer les images sur le disque dur. Que demande le peuple ?
Si on combine tout ça, on obtient un script PHP qui ressemble à ça :

Code : PHP

<?php
// Tirage de l'image aléatoire
$haut = mt_rand(1, 72);
// Génération du nom de l'image pré-calculée :
$imgCache = 'cache/h'.$haut.'_b1.jpg';

// Est-ce que mon image existe déjà dans le cache ?
if (!file_exists($imgCache)) {

	// Visiblement, non. Alors on la génère :

	// L'image finale
	$iFinale = imagecreatetruecolor(150,200);

	// Récupération des images sources
	$iHaut = imagecreatefrompng('haut_'.$haut.'.png');
	$iBas = imagecreatefrompng('bas.png');

	// Collage de l'image haute dans l'image finale
	imagecopy($iFinale,
		  $iHaut,
		  0, 0,
		  0, 0,
		  150, 150);
	// Collage de l'image basse dans l'image finale
	imagecopy($iFinale,
		  $iBas,
		  0, 150,
		  0, 0,
		  150, 50);

	// Sauvegarde de l'image
	imagejpeg($iFinale, $imgCache, 90);
}
// Maintenant, on est sûrs que notre image existe, donc on peut l'afficher :
header('Location: '.$imgCache);
?>

Le résultat de ce script se trouve à votre droite.
Au bout d'un moment, on va se retrouver avec 72 images dans le dossier « cache », de h1_b1.jpg à h72_b1.jpg, il n'y aura alors plus rien à générer, et votre serveur pourra se la couler douce !
Et mieux, si on ajoute une image 73 (et qu'on pense bien à changer le nombre maximum d'images dans le script), elle va se rajouter toute seule à la liste.

Contre-indications

Hélas, la technique du cache ne fonctionne pas avec tous les types d'avatars aléatoires. En fait, je vois deux raisons principales qui empêchent d'utiliser cette technique :

L'avatar trop aléatoire

Votre avatar affiche des informations différentes à chaque fois (typiquement : l'heure, l'IP du visiteur…). Là, vous n'avez pas le choix, vous devez recalculer l'image à chaque fois.

L'avatar produit trop d'images

C'est un simple problème de multiplications. L'image que vous avez à votre droite est un de mes anciens avatars. Il est constitué de :

3 « fonds » différents ;
13 manières d'écrire « SpaceFox » en différentes langues ;
64 demoiselles différentes.

Un petit calcul m'indique donc que dans mon cache, il y avait au bout d'un moment :
3 x 13 x 64 = 2 496 images différentes.
Chaque image me prend environ 63 kio, j'ai donc environ 150 Mio de cache pour cet avatar.

Avant de lancer votre avatar sur le serveur, vérifiez s'il y aura la place de mettre tous les fichiers cache !

Retour en haut

Deux avatars en un

Cet avatar est très sympathique, et j'aimerais beaucoup pouvoir l'utiliser ailleurs, sur le Site du Zéro par exemple.

Problème : je ne peux pas l'utiliser directement, les formats ne sont pas compatibles.

En effet, le site pour lequel j'ai conçu cet avatar accepte des avatars de 150 x 200 pixels, et le Site du Zéro est limité à 100 x 100 pixels. Zut. Voilà qui est bien gênant. Que faire ?

Tu peux redimensionner toutes les images de demoiselles (qui sont déjà carrées), et utiliser la première technique pour le Site du Zéro.

Certes, mais :

Je suis une feignasse, donc je n'ai pas envie de faire plein de redimensionnements à la main.
Si j'ajoute une image, je devrai aussi la redimensionner pour qu'elle apparaisse dans les deux avatars. Et si je veux avoir trois, quatre, cinq avatars avec les mêmes demoiselles ?

La solution est toute simple : il faut refaire un script. Un set d'images, deux scripts, donc deux avatars. Et si je modifie une image, les deux avatars sont impactés.

Évidemment, il faut utiliser un système de cache ici aussi, pas question de redimensionner « à la volée ». Je vous donne directement le script :

Code : PHP

<?php
$id = mt_rand(1, 72);
$imgCache = 'cachesdz/'.$id.'.jpg';

if (!file_exists($imgCache)) {
	$iFinale = imagecreatetruecolor(100,100);	
	imagecopyresampled($iFinale,
			   imagecreatefrompng('haut_'.$id.'.png'),
			   0, 0,
			   0, 0,
			   100, 100,
			   150, 150);
	
	imagejpeg($iFinale, $imgCache, 90);
}
header('Location: '.$imgCache);
?>

Et voilà comment on obtient deux avatars différents avec un seul set d'images.
L'inconvénient de ce genre de méthodes est qu'il faut modifier les deux fichiers PHP à chaque fois qu'on change le nombre d'images.
Notez que l'on peut toujours contourner ce « problème » en déclarant le nombre d'images dans une constante dans un fichier de configuration (si j'ose dire), qui sera inclus dans tous les avatars.

Dans config.php :

Code : PHP

1	<?php define('NB_DEMOISELLES', 72); ?>

Puis dans tous les scripts d'avatar :

Code : PHP

<?php
require('config.php');
$id = mt_rand(1, NB_DEMOISELLES);
// Suite du code spécifique à chaque avatar...
?>

Ou tout autre système de non-redondance que vous pourriez imaginer. Toutefois, n'oubliez pas que la simplicité est le maître mot de ce tutoriel…

Retour en haut

Feinter les protections : faire croire que son image aléatoire est une vraie image

Donc vous avez votre script qui marche impec, testé sur votre serveur, et tout. Vous indiquez l'adresse de votre avatar dans votre forum préféré, et…

Échec. Le serveur veut absolument « une image », donc un nom qui se finit en .jpg, .png ou .gif. Pas moyen de lui passer ce fichu script qui se termine par .php…

Pas de panique ! Il existe deux manières de contourner ce problème !

La manière « barbare » : le paramètre inutile

Elle s'appelle ainsi parce qu'elle n'est ni subtile, ni délicate, mais très simple très efficace. Disons, dans 9 cas sur 10.

Il s'agit de passer un paramètre inutile à votre script, et de lui donner la valeur .jpg, .png ou .gif. Au lieu d'indiquer :
exemple.com/avatar.php
comme adresse d'image, ce qui ne va pas fonctionner, on passe :
exemple.com/avatar.php?inutile=.jpg

Et là, tout le monde est content :

Le système de protection qui va voir une adresse en .jpg, et en déduire que c'est une image valide.
Le script, qui va recevoir un paramètre (ici « inutile » avec la valeur « .jpg ») dont il se fiche totalement, vu qu'il ne le récupère jamais.

Le gros avantage de cette méthode, c'est qu'elle se fait en 10 secondes sans rien toucher sur votre serveur.

La manière « agent double » : le dossier déguisé en fichier

Elle s'appelle ainsi parce qu'elle fonctionne comme un agent double : le dossier se fait passer pour un fichier pour obtenir ce qu'il veut, et c'est très efficace.

Cette technique ne fonctionne que si vous avez un seul avatar dans le dossier.

Ici, on va se servir de cette propriété intéressante des serveurs web :

Citation : Les règles des serveurs web

Quand on donne l'adresse d'un dossier à un serveur web, il va automatiquement chercher le fichier index.php ou index.html qu'il y a dedans.

Et qu'est-ce qui m'empêche d'appeler mon dossier avatar.jpg ? Eh bien… rien !
On va devoir toucher un peu à la structure de notre avatar. Il faut :

Mettre tous les fichiers (images, script) dans un même dossier que l'on appellera par exemple avatar.jpg.
Renommer le script en index.php.

Puis vous indiquez à votre site l'adresse suivante : exemple.com/avatar.jpg
Le site va voir une image, donc va être content et accepter votre avatar. Le serveur, lui, va regarder ce qu'est avatar.jpg et comme c'est un dossier, il va automatiquement appeler :
exemple.com/avatar.jpg/index.php
ce qui va renvoyer votre image.

L'avantage de cette solution, c'est qu'elle marche sur n'importe quel serveur ; l'inconvénient est qu'elle ne fonctionne plus, ou plus exactement qu'elle nécessite de sérieuses modifications du code, quand on veut faire plusieurs avatars à partir du même set d'images.

La manière « ninja » : le fichier .htaccess

Elle s'appelle ainsi parce qu'elle est subtile, discrète et très, très efficace. En fait, elle ne peut pas échouer.

La première étape, c'est de déclarer qu'on utilise un vrai fichier image, on indique comme adresse quelque chose du genre :
exemple.com/avatar.jpg

Sauf qu'on va dire à Apache que ce fichier avatar.jpg n'est pas une image, mais notre fichier avatar.php, et ce grâce aux directives htaccess.
Pour ce faire, il faut créer un fichier nommé .htaccess dans le même dossier que votre fichier PHP, qui contient les deux lignes :

Code : Apache

1 2	RewriteEngine on RewriteRule ^avatar\.jpg$ avatar.php [L]

En fait, on se sert du module de réécriture d'URL d'Apache (ligne 1), et on lui demande de réécrire avatar.jpg (ce que voit le client) en avatar.php (ce qui va être fait sur le serveur).
Je ne détaillerai pas ceci en profondeur, vous pouvez trouver les informations de base sur les fichiers .htaccess ici et trouver les informations sur la réécriture d'URL un peu partout sur Internet.

L'avantage de cette technique est qu'elle est imparable : le client, donc le système de protection, n'a aucun moyen de savoir que vous ne lui passez pas une « vraie » image.
Les inconvénients sont que la technique nécessite le ModRewrite activé sur le serveur Apache, et qu'il faut créer le .htaccess en plus.

Les cas pathologiques

Il existe quelques administrateurs paranoïaques, qui ont entendu parler des failles CSRF et qui ont mis en place des techniques un peu violentes pour s'en prémunir.
Nous allons voir ici deux de ces techniques, et ce qu'on peut faire face à de tels cas.

Le site télécharge l'image et ne se sert que de la version locale

Tout est dans le titre : quand vous donnez une URL, le site télécharge une copie de l'image, et la stocke sur son propre serveur. L'image que voient les visiteurs est celle stockée sur le serveur.

Là, vous avez perdu : il est totalement impossible de faire un avatar aléatoire avec une telle « protection ».

A priori c'est le cas :

Des avatars sur les forums Xooit.

Les signatures ne semblent pas affectées : je n'ai pas essayé personnellement mais, si j'ai bien compris, la « technique ninja » fonctionne.

Si quelqu'un a plus d'informations, merci de les partager dans les commentaires. De même, si quelqu'un connaît d'autres plates-formes ou sites connus qui fonctionnent de cette manière, signalez-le-moi que je puisse tenir cette liste à jour.

Le site vérifie qu'il n'y a pas de redirection

Et sa variante : le site enregistre l'URL sur laquelle on redirige au lieu de l'URL que l'on donne.
Or, tout le fonctionnement repose sur ces fameuses redirections, d'où : problème.

Il faut savoir que le site ne peut vérifier cette redirection qu'à l'enregistrement — ou alors doit déployer des moyens complètement déments, qu'aucun webmaster sain d'esprit ne mettra en place.

La parade fonctionne donc en deux étapes :

On fournit une vraie image exemple.com/avatar.jpg au formulaire. Le site la vérifie, et enregistre l'URL telle quelle dans sa base, puisqu'il a vérifié qu'il s'agissait bien d'une vraie image.
Une fois l'enregistrement effectué, on supprime notre vraie image exemple.com/avatar.jpg et on se sert de la « technique ninja » pour faire correspondre exemple.com/avatar.jpg à notre fichier .php.

Personnellement je n'ai jamais vu ce genre de cas ; si quelqu'un connaît des plates-formes / sites connus qui fonctionnent de cette manière, merci de me le signaler en commentaire, que je puisse en faire une liste ici.

Retour en haut

Voilà, maintenant vous savez à peu près tout ce qu'il y a à savoir sur la création d'avatars aléatoires. En résumé :

il faut utiliser la redirection vers les images ;
on peut calculer des images, mais dans ce cas un système de cache est très intéressant ;
on peut générer plusieurs avatars pour plusieurs sites à partir d'un même set ;
les protections pour obliger à mettre de vraies images sur les sites sont feintables.

Mais surtout, vous savez que si vous prenez la peine de nommer correctement vos fichiers, vous épargnez beaucoup de douleurs à votre serveur, et accessoirement simplifiez vos scripts.
Un peu de travail pour vous, beaucoup moins pour votre serveur.

En cadeau pour finir, et parce que vous êtes de bons programmeurs, donc de vraies feignasses qui refusent de nommer plein de fichiers à la main, dans l'ordre et sans se tromper, je vous offre ce logiciel qui le fait pour vous : AntRenamer.
Un petit logiciel bien pratique qui permet de numéroter une liste de fichiers, mais aussi de les renommer de plein de manières différentes.

Si vous avez des questions, commentaires, réflexions, etc., n'hésitez pas, les commentaires sont là pour ça !

Retour en haut

Retour en haut

42 commentaires pour "Créer un avatar aléatoire"

Note moyenne : 3.61 / 4 (41 votes)

Pseudo	Commentaire
Anonyme	# Posté le 04/06/2011 à 12:38:45
	On peut faire un tas d'autres astuces avec ce tuto !
seby63	# Posté le 24/07/2011 à 21:38:29
	euh thank pour le tuto. mais comment on fait pour les utilisateurs de lighttpd ??? ^^' Nos meilleures idées viennent des autres. Rembourse ton Forfait.
SpaceFox	# Posté le 24/07/2011 à 21:40:39
Utilise ton cerveau ! Blog Twitter close Études : UTT	Aucune idée. Une recherche sur l'URL rewriting sous lighttpd devrait te donner la réponse
seby63	# Posté le 25/07/2011 à 15:39:28
	ok quand je trouve je poste la réponse ici comme sa tu pourras l'ajouter car tous le monde ne fait pas du apache, c'est gourmand ! Nos meilleures idées viennent des autres. Rembourse ton Forfait.
Braklabank	# Posté le 08/01/2012 à 14:54:57
C'est bon les pâtes. Avis : Très bon Blog Twitter close	Très bon tutoriel, rien à redire. Je sais maintenant créer mon avatar aléatoire. Merci. Tout corps plongé dans un liquide en ressort mouillé.