CodeS-SourceS
Rechercher un code, un tuto, une réponse

Miniatures (thumbnails) automatiques

Novembre 2017


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 :

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
Publié par monoceros01.
Ce document intitulé «  Miniatures (thumbnails) automatiques  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Comment bien utiliser les en-têtes !
Créer un utilisateur mysql avec des droits spécifiques sur une base particulière