Vignettes d'images en PHP à hauteur et largeur définies

Créer des vignettes: Deuxième partie

Dans cette deuxième partie, le script de vignettes, ou thumbnail, va être perfectionné de sorte que la hauteur et la largeur de la vignette soient toutes deux définies pour toutes les vignettes, tout en gardant les proportions des images initiales.

En effet l'inconvénient du script de thumbnail de la première partie, était de redimensionner l'image à une hauteur ou largeur donnée au choix, mais que l'autre dimension restait variable ce qui ne permet pas de réaliser des galeries.

Pour arriver à ce résultat, préférable dans une page Web, on va redimensionner l'image pour créer une vignette intermédiaire qui conserve les proportions, et ensuite rogner soit en hauteur, soit en largeur, selon la forme de l'image initiale.

Calcul des dimensions de la vignette intermédiaire

La vignette intermédiaire aura la largeur ou la hauteur de la vignette affiché, selon que c'est la hauteur ou la largeur qui est inférieure à l'autre dimension.

Dimensions de la thumbnail

Dans la démo, les dimensions sont de 150 en hauteur et 140 en largeur. On pourrait choisir n'importe quelles valeurs.

  $thumbh = 150;
  $thumbw = 140;

Choix de la formule

Faut-il rogner sur la hauteur ou sur la largeur?

Si la vignette intermédiaire à une hauteur de 150, sa largeur sera supérieure ou égale à cette valeur.
Si elle a une largeur de 140, sa hauteur doit être supérieure ou égale.

Pour l'anticiper ou calcule les ratios hauteur / largeur de l'image et de la vignette.

  $ratio = $h / $w;
  $nratio = $thumbh / $thumbw;

Si ratio, la proportion originelle, est supérieure à nratio, la proportion de la vignette finale, on doit rogner sur la hauteur. Sur la largeur dans l'autre cas.

Et si on rogne sur la hauteur, on redimensionne l'image selon la largeur.

Redimensionner sur la largeur

Dans le cas ou ratio est supérieur à nratio, autrement dit l'image originelle est trop haute par rapport à la vignette à réaliser, on crée une vignette intermédiaire en se basant sur la largeur voulue: 

$x = intval($w * $nh / $h);
if ($x < $nw)
{
   $nh = intval($h * $nw / $w);
} 
else
{
  $nw = $x;
}

On définit x, la largeur intermédiaire en redimensionnant l'image par la formule w * nh / h.

Si x est inférieur à la largeur désirée, on redimensionne l'image sur la hauteur par la formule nh = h * nw / w.
Sinon on conserve la hauteur et on donne à la nouvelle largeur nw la valeur intermédiaire x.

Redimensionner sur la hauteur

Si le nouveau ratio nratio est supérieur au ratio originel ratio, l'image est plus large que haute, il faut la réduire en se basant sur la hauteur, et rogner ensuite en largeur.

$x = intval($h * $nw / $w);
if ($x < $nh)
{
   $nw = intval($w * $nh / $h);
} 
else
{
   $nh = $x;
}

Les calculs sont inversés.

Créer l'image intermédiaire

Les fonctions PHP de la première partie sont de nouveau utilisées pour réduire l'image:

  $resimage = imagecreatefromjpeg($oldname); 
  $newimage = imagecreatetruecolor($nw, $nh);  
  imageCopyResampled($newimage, $resimage,0,0,0,0,$nw, $nh, $w, $h);

Mais en outre, il faut rogner l'image, donc on crée une image vide sur laquelle on copie une partie de la vignette intermédiaire.

  $viewimage = imagecreatetruecolor($thumbw, $thumbh);
  imagecopy($viewimage, $newimage, 0, 0, 0, 0, $nw, $nh);

Ne reste plus qu'à sauver la vignette

Dans la démo, un tableau d'image est scanné par la structure foreach. Voir le code source complet.

Galerie de vignettes créées avec le script

Cliquer pour voir l'image originelle.

Code source