Miniatures (thumbnails) automatiques
Miniatures (thumbnails) automatiques
Description
Je vous propose une petite introduction à l'utilisation de la librairie GD pour php, autour d'un thème récurrent : la création de miniatures à la volée.
Introduction
Voici un tuto pour les feignants :]
Pour ceux qui ont la flemme d'ouvrir leur éditeur graphique préféré, et de créer manuellement les miniatures (thumbnails) qui agrémenteront sympathiquement leur galerie.
Mais aussi pour ceux qui viennent de découvrir que grâce à une librairie, on pouvait faire du traitement d'image via php.
En effet, ce tutoriel s'adresse à des personnes ayant déjà certaines bases en php (si la première chose qui t'es venue à l'esprit, quand j'ai parlé de librairie, est une espèce de magazin remplis de bouquins poussiéreux, passe ton chemin!)
Entrons dans le vif du sujet.
Liste des fonctions
Nous allons utiliser la très célèbre librairie GD qui fournit une série de fonctions de traitement de l'image. Pour ce tutorial, on utilisera :
- une fonction qui retourne une ressource correspondant à une image noir utilisée comme support au résultat final : imagecreatetruecolor()[1]
- une fonction qui retourne une ressource correspondant à une image de base utilisée : imagecreatefromjpeg(), imagecreatefrompng() ou imagecreatefromgif()[2]
- une fonction qui permet de découper tout ou partie de l'image de base, de l'étirer et de la coller sur le support : imagecopyresampled()[3]
- une fonction qui exporte l'image provenant d'une ressource : imagejpeg(), imagepng() ou imagegif().
Utilisation de ces fonctions
Créer les ressources
Elle consiste a créer la variable $base et $support et d'y stocker les données de l'image de base et de l'image qui va nous servir de support.
$base = imagecreatefromjpeg('tutophp_base.jpg');
$support = imagecreatetruecolor(200,200);
déterminer la zone a copier
- $x_copie : la distance horizontale entre le bord de l'image de base et la zone à copier
- $y_copie : la distance verticale entre le bord de l'image de base et la zone à copier
- $w_copie : la largeur de la zone à copier
- $h_copie : la hauteur de la zone à copier
déterminer la zone où coller
- $x_colle : la distance horizontale entre le bord du support et de la zone de collage
- $y_colle : la distance verticale entre le bord du support et de la zone de collage
- $w_colle : la largeur de la zone de collage
- $h_colle : la hauteur de la zone de collage
copier/coller
Maintenant, il suffit d'utiliser une fonction qui va copier la zone définie à la deuxième étape et la coller sur le support dans la zone définie à la troisième étape.
Si les mesures de la zone de collage ne sont pas proportionnelles à la zone copiée, l'image sera étirée pour s'y adapter.
imagecopyresampled(
$support,$base,
$x_colle,$y_colle,$x_copie,$y_copie,
$w_colle,$h_colle,$w_copie,$h_copie
);
exporter
Maintenant, $support contient le résultat du collage. Il faut donc exporter cette ressource dans un fichier.
imagejpeg($support,'totuphp_resultat.jpg',100);
Et voila =)[4]
Application à la création de miniature
getimagesize()
Cette fonction sert a renvoyer dans un tableau les information de l'image passée en paramètre (via son URL bien sûr)
getimagesize('tutophp_base.jpg');
Va renvoyer
Array (
0 => 278,
1 => 220,
2 => 2,
3 => 'width="278" height="220"',
'bits' => 8,
'channels' => 3
)
Il s'agit donc de :
- 0 : la largeur
- 1 : la hauteur
- 2 : le type [5]
- 3 : une chaine de caractère contenant la largeur et la hauteur (pour les balises <img />)
- 'bits' : le nombre de bits pour chaque couleur.
- 'channels' : le nombre de canaux par pixel[6]
Elle va donc nous servir essentiellement à connaître les dimensions de l'image de base, mais aussi à en connaître le type. Le type est en effet important a connaître pour savoir quelle fonction utiliser pour créer la ressource de base.
On aura donc :
$base_info=getimagesize('tutophp_base.extension');
if($base_info[2]==1) {
$base=imagecreatefromgif('tutophp_base.extension');
} else if($base_info[2]==2) {
$base=imagecreatefromjpeg('tutophp_base.extension');
} else if($base_info[2]==3) {
$base=imagecreatefrompng('tutophp_base.extension');
} else {
return FALSE; }
$w_base = $base_info[0];
$h_base = $base_info[1];
Calcul des paramètres pour le copier/coller
Définir les dimensions maximale de la miniature
$w_mini : largeur maximale des miniatures
$h_mini : hauteur maximale des miniatures
$w_mini = 100; $h_mini = 100;
Calculer la taille du support (= la taille de la miniature)
L'impératif de cette étape est de déterminer les dimensions de la miniature en sachant que :
- le ratio largeur/hauteur doit être identique entre la base et la miniature
- l'une des deux mesure sera égale à $w_mini ou à $h_mini et que l'autre lui sera inférieure
On trouve ainsi :
if( ($w_base/$h_base) >= ($w_mini/$h_mini) ) {
$w_support = $w_mini ;
$h_support = $w_mini*($h_base/$w_base);
}else{
$w_support = $h_mini*($w_base/$h_base);
$h_support = $h_mini ; }
Explication : si le ratio $w_base/$h_base est supérieur au ratio $w_mini/$h_mini cela signifie que :
- la largeur de la miniature devra atteindre la limite de largeur définie
- la hauteur sera calculée en conservant le ratio $w_base/$h_base pour éviter que l'image ne soit déformée (et réciproquement)
Créer le support
$support = imagecreatetruecolor($w_support,$h_support);
support de la miniature
Compléter les paramètres manquants
Déterminer la zone à copier
En l'occurrence, là il s'agit de l'image entière donc :
$x_copie = 0 ; $y_copie = 0 ; $w_copie = $w_base ; $h_copie = $h_base ;
Déterminer la zone où coller
$x_colle = 0 ; $y_colle = 0 ; $w_colle = $w_support ; $h_colle = $h_support ;
Copier/coller
imagecopyresampled(
$support,$base,
$x_colle,$y_colle,$x_copie,$y_copie,
$w_colle,$h_colle,$w_copie,$h_copie
);
Exporter l'image
imagejpeg($support,'totuphp_resultat',100);
Fonction utilisée pour mon site
Code
function thb_gen($Source,$Destination)
{
$src_info=getimagesize($Source);
if($src_info[2]==1) {$src=imagecreatefromgif($Source);}
else if($src_info[2]==2) {$src=imagecreatefromjpeg($Source);}
else if($src_info[2]==3) {$src=imagecreatefrompng($Source);}
else {return FALSE;}
$dst_w = ($src_info[0]/$src_info[1] >= THB_W/THB_H) ? THB_W : (THB_H*$src_info[0])/$src_info[1];
$dst_h = ($src_info[0]/$src_info[1] <= THB_W/THB_H) ? THB_H : (THB_W*$src_info[1])/$src_info[0] ;
$dst_x = (THB_W - $dst_w)/2 ;
$dst_y = (THB_H - $dst_h)/2 ;
$dst=imagecreatetruecolor(THB_W,THB_H);
imagecopyresampled($dst, $src, $dst_x, $dst_y, 0, 0, $dst_w, $dst_h , $src_info[0], $src_info[1]);
@unlink($Destination);
imagejpeg($dst, $Destination, 100);
}
?>
Explication
Les constantes
THB_W et THB_H sont les constantes définies dans mon fichier de configuration et correspondent à la taille des miniatures.
Le calcul des paramètres
Comme vous pouvez le constater, toutes mes miniatures ont la même taille. Des bandes noires sont rajoutées en compensations pour éviter de déformer les images une fois miniaturisées et correspondent en fait à la couleur de fond du support.
En fait, au lieu de calculer les valeurs de largeur et de hauteur pour le support, je les calcule pour la zone de collage sur le support ($dst_w et $dst_h). Puis je calcule la distance au support ($dst_x et dst_y) pour centrer la zone de collage dans le support.
Notes
[1] si cette fonction n'est pas disponible, on peut utiliser imagecreate() mais le résultat sera moins bon
[2] ces fonctions ne s'utilisent respectivement qu'avec des images jpeg, png et gif. Il n'y a rien pour les bitmap il me semble, mais de toute façon, le bitmap n'est pas un format compressé, et sur le net il faut compresser au mieux les images :) ...
[3] si cette fonction n'est pas disponible, on peut utiliser imagecopyresized() mais le résultat sera moins bon
[4] le troisième paramètre est optionnel et définit la qualité de l'exportation. Il prend des valeurs entières de 0 (pire qualité, petit fichier) à 100 (meilleure qualité, gros fichier). Par défaut, la valeur est celle de la qualité IJG (75). Ce paramètre n'existe pas pour imagepng et imagegif
[5] 1 = GIF, 2 = JPG, 3 = PNG, 4 = SWF, 5 = PSD, 6 = BMP, 7 =TIFF (Ordredes octets Intel), 8 = TIFF (Ordre des octets Motorola), 9 =JPC, 10 =JP2, 11 = JPX, 12 = JB2, 13 = SWC, 14 = IFF
[6] égal à 3 pour RGB et 4 pour CMYB