Manipuler des images en PHP en utilisant GD

() translation by (you can also view the original English article)

Internet serait assez terne sans images. Cependant, conserver et manipuler des centaines ou des milliers d'images pour votre site Web peut être un casse-tête. Au fur et à mesure que la conception de votre site change, vous devrez peut-être modifier toutes vos images. Par exemple, vous devrez peut-être convertir toutes vos images en niveaux de gris ou les redimensionner à 50% de leur taille d'origine. Vous pouvez également compresser ou recadrer des images différentes. Faire cela manuellement prend du temps et est sujet aux erreurs, mais avec un peu de connaissances en programmation, il peut être automatisé.

Dans ce tutoriel, nous allons découvrir la bibliothèque GD (Graphic Draw) en PHP. Vous verrez comment cette bibliothèque peut être utilisée pour manipuler des images en les redimensionnant, en les coupant, en les faisant pivoter ou en les filtrant.

Qu'est ce que GD?

PHP peut faire beaucoup plus que simplement servir du HTML aux visiteurs. Par exemple, il a la capacité de manipuler des images. De plus, vous pouvez également créer vos propres images à partir de zéro, puis les enregistrer ou les diffuser aux utilisateurs.

PHP peut gérer presque tous vos besoins de base en matière de manipulation d’images en utilisant la bibliothèque GD - abréviation de Graphic Draw.

Installer

Si vous travaillez sous Windows, vous pouvez inclure le fichier php_gd2.dll en tant qu'extension dans php.ini. Si vous utilisez quelque chose comme XAMPP, vous trouverez le fichier php_gd2.dll dans le répertoire xampp \ php \ ext. Vous pouvez également vérifier si GD est installé sur votre système en utilisant la fonction phpinfo () ;. Si vous faites défiler la sortie résultante, vous trouverez quelque chose de similaire à ce qui suit.

Vous pouvez également visiter la page d'exigences et d'installation pour en savoir plus sur le processus d'installation.

Création d'images à l'aide de PHP GD

La première étape vers la manipulation d'images à l'aide de PHP consiste à les charger en mémoire en tant que ressource image. Cela peut être réalisé en utilisant différentes fonctions pour différents formats. Toutes ces fonctions ont des noms très similaires, donc faciles à mémoriser.

Créer une nouvelle image

La fonction imagecreatetruecolor () sera utile si vous ne manipulez pas une source d’image originale. Il accepte deux paramètres entiers: une largeur et une hauteur. Il retournera une ressource image si tout se passait comme prévu. La ressource d'image renvoyée est essentiellement une image noire avec la largeur et la hauteur spécifiées.

Charger un fichier image

Si vous prévoyez de manipuler des images déjà stockées quelque part, vous pourrez utiliser des fonctions telles que imagecreatefromjpeg (), imagecreatefrompng () et imagecreatefromgif (). Ceux-ci vont créer une ressource image avec toutes les données du fichier image chargé. Ces fonctions acceptent un seul paramètre qui spécifie l'emplacement de l'image que vous chargez sous forme d'URL ou de chemin de fichier.

Créer une image à partir d'une chaîne

La bibliothèque GD vous permet également de créer des images à partir d'une chaîne en utilisant la fonction imagecreatefromstring() en PHP. Rappelez-vous que vous devrez utiliser base64_decode () sur la chaîne donnée avant imagecreatefromstring (). La fonction peut détecter automatiquement si le type d'image est JPG, PNG, GIF ou autre format pris en charge.

Faire pivoter, redimensionner, recadrer et retourner une image

Certaines opérations courantes que vous pouvez effectuer sur une ressource d'image sont la rotation, la mise à l'échelle, le rognage et le retournement.

Rotation

Vous pouvez faire pivoter une image que vous avez déjà chargée dans le script en utilisant la fonction imagerotate (). Il fera pivoter l'image selon l'angle fourni en utilisant le centre de l'image comme centre de rotation. L'angle est fourni sous forme de valeur flottante et PHP considère qu'il s'agit de la valeur du degré pour la rotation. Parfois, l'image pivotée aura des dimensions différentes de celles de la version originale. Cela signifie que vous allez vous retrouver avec une zone non couverte après la rotation. Le troisième paramètre de la fonction imagerotate() peut être utilisé pour spécifier la couleur de fond de la zone vide après la rotation.

Mise à l'échelle

Il est très facile de mettre à l'échelle une image en utilisant la bibliothèque GD. Il suffit de transmettre la ressource image ainsi que la largeur et la hauteur à la fonction imagescale (). Si vous omettez la hauteur, GD redimensionne l'image à la largeur spécifiée tout en préservant les proportions. Vous pouvez également spécifier le mode de mise à l'échelle de l'image. Il peut être paramétré sur IMG_NEAREST_NEIGHBOUR, IMG_BILINEAR_FIXED, IMG_BICUBIC, etc.

Recadrage

Vous pouvez recadrer n'importe quelle ressource d'image en utilisant la fonction imagecrop() dans GD. Le premier paramètre est la ressource image originale et le second paramètre est un tableau associatif avec les clés x, y, width et height, spécifiant les dimensions de la position de la fenêtre de recadrage.

L'image papillon ci-dessus a été recadrée en utilisant le code suivant:

1	$im_php = imagecreatefromjpeg('path/to/image');
2	$size = min(imagesx($im_php), imagesy($im_php));
3	$im_php = imagecrop($im_php, ['x' => $size*0.4, 'y' => 0, 'width' => $size, 'height' => $size]);
4	$im_php = imagescale($im_php, 300);

Fondamentalement, nous stockons la longueur du plus petit côté dans la variable $size. Cette variable est ensuite utilisée pour définir les limites de notre rectangle de recadrage. Enfin, l'image est réduite de manière à ne faire que 300 pixels de large et de long. Cela nous donne une image carrée correctement dimensionnée.

Flipping Images

Les images peuvent être retournées horizontalement, verticalement ou dans les deux directions à l'aide de la fonction imageflip(). Il accepte la ressource image que vous voulez retourner comme premier paramètre et le mode flip comme second paramètre. Le mode Flip peut être défini sur IMG_FLIP_HORIZONTAL, IMG_FLIP_VERTICAL ou IMG_FLIP_BOTH.

L'image en haut à gauche de la figure ci-dessus est l'original. L'image en haut à droite a été créée avec IMG_FLIP_HORIZONTAL, l'image en bas à gauche a été créée avec IMG_FLIP_VERTICAL et l'image en bas à droite a été créée avec IMG_FLIP_BOTH. (L'image de corbeau provient de Pixabay.)

Application de filtres à une image

GD possède également une fonction imagefilter() très utile qui peut appliquer des filtres sur différentes ressources d'images chargées en utilisant les fonctions des images précédentes. Cette fonction peut accepter différents paramètres en fonction du filtre que vous appliquez.

Pour les débutants, spécifiez la ressource image et le nom du filtre que vous souhaitez appliquer. Vous pouvez le définir sur l'un des 12 types de filtres prédéfinis mentionnés dans les documents.

IMG_FILTER_NEGATE: inverse les couleurs de l'image
IMG_FILTER_GRAYSCALE: supprime la couleur de l'image
IMG_FILTER_BRIGHTNESS: rend l'image plus claire ou plus sombre
IMG_FILTER_CONTRAST: augmente le contraste de l'image
IMG_FILTER_COLORIZE: teinte l'image à une couleur sélectionnée
IMG_FILTER_EDGEDETECT: met en évidence les bords de l'image
IMG_FILTER_EMBOSS: similaire à la détection des contours, mais donne à chaque bord un aspect en relief
IMG_FILTER_GAUSSIAN_BLUR: floue l'image en utilisant la méthode gaussienne
IMG_FILTER_SELECTIVE_BLUR: floue l'image en utilisant la méthode sélective
IMG_FILTER_MEAN_REMOVAL: un effet pour créer une image stylisée
IMG_FILTER_SMOOTH: lisse les bords irréguliers de l'image
IMG_FILTER_PIXELATE: rend l'image pixellisée

Certains filtres comme NEGATE, GRAYSCALE, EDGE_DETECT et EMBOSS ne nécessitent aucune donnée supplémentaire. D'autres filtres, tels que BRIGHTNESS, CONTRAST et SMOOTH peuvent accepter un paramètre supplémentaire qui spécifie la quantité de luminosité, de contraste ou de fluidité de l'image finale. Le paramètre PIXELATE vous permet de spécifier deux paramètres supplémentaires: la taille du bloc et le mode de pixellisation. Enfin, le filtre COLORIZE accepte quatre paramètres qui déterminent les valeurs des composants rouge, vert et bleu ainsi que du canal alpha.

L'image en haut à gauche est l'original. L'image en haut à droite a été créée à l'aide du filtre COLORIZE, la partie inférieure gauche a été créée à l'aide du filtre GRAYSCALE et l'image en bas à droite a été créée à l'aide du filtre BRIGHTNESS. (Cette image de papillon a été trouvée au sommet.)

Autres fonctions de manipulation d'images utiles

Vous devez également connaître d'autres fonctions courantes de GD qui sont utiles de temps en temps.

Obtenir des dimensions d'image

Vous pouvez déterminer la largeur et la hauteur d'une ressource d'image à l'aide des fonctions imagesx () et imagesy ().

Une autre fonction appelée getimagesize() peut également être utilisée pour obtenir la largeur et la hauteur d'une image avec son type. Cette fonction renvoie un tableau avec des éléments spécifiant la largeur, la hauteur et le format de l'image. Les deux premiers éléments du tableau décrivent la largeur et la hauteur, et le troisième élément contient une constante spécifiant le format du fichier: un parmi IMAGETYPE_PNG, IMAGETYPE_GIF, etc.

Enregistrer une image

Une fois que vous avez apporté toutes les modifications souhaitées à une image, vous souhaiterez probablement la diffuser dans le navigateur ou l'enregistrer en tant que fichier. Dans les deux cas, vous devrez utiliser l'une des fonctions de sortie de GD telles que imagejepg(), imagepng() ou imagegif(). Vous transmettez votre ressource image à l'une de ces fonctions de sortie et, si vous souhaitez enregistrer l'image dans un fichier, vous spécifiez également un nom de fichier. Vous pouvez également contrôler la qualité de l'image de sortie en utilisant un troisième paramètre facultatif en fonction du type d'image.

Redimensionnement de toutes les images d'un répertoire

Appliquons les connaissances acquises jusqu'à présent pour faire quelque chose de pratique. Dans cette section, nous redimensionnerons toutes les images JPEG d’un répertoire particulier pour avoir une largeur de 640 pixels. La hauteur sera calculée automatiquement en fonction des dimensions de l'image d'origine.

Nous allons enregistrer les images redimensionnées dans un nouveau dossier intitulé Resized. Toutes les images originales dans ce cas ont les mêmes dimensions, mais le code fonctionnera correctement avec des images de toutes tailles et de tous formats.

$directory = 'Nature/';
$images = glob($directory."*.jpg");

foreach($images as $image) {
    $im_php = imagecreatefromjpeg($image);
    $im_php = imagescale($im_php, 640);
    $new_height = imagesy($im_php);
    $new_name = str_replace('-1920x1080', '-640x'.$new_height, basename($image)); 
    imagejpeg($im_php, $directory.'Resized/'.$new_name);
}

Dans le code ci-dessus, nous commençons par utiliser la fonction glob() pour rechercher toutes les images avec une extension .jpg dans le répertoire intitulé Nature. Le fichier images est stocké dans un tableau et on les passe en boucle un par un.

Comme toutes les images que nous voulons redimensionner sont des images JPEG, nous utilisons la fonction imagecreatefromjpeg() pour les charger dans le script. La fonction imagescale () est ensuite utilisée pour redimensionner l'image à une largeur spécifique (640 pixels dans notre cas). Nous n'avons pas spécifié de hauteur fixe pour que la hauteur soit calculée automatiquement.

Chaque fichier image d'origine avait -1920x1080 était ajouté à son nom de fichier pour indiquer ses dimensions. Nous utilisons str_replace () sur le nom de fichier d'origine et remplaçons -1920X1080 par la nouvelle taille d'image.

Enfin, nous sauvegardons les images redimensionnées dans un dossier nommé Resized avec les nouveaux noms de fichiers. Vous pouvez également passer un troisième paramètre à la fonction imagejpeg() pour définir la qualité du fichier image enregistré. Si le troisième paramètre est omis, les images sont enregistrées avec une qualité par défaut de 75.

Appliquer des filtres de niveaux de gris et de contraste sur chaque image d'un répertoire

Cette fois, nous allons appliquer deux filtres différents sur chaque image de notre répertoire et enregistrer le résultat final dans un répertoire différent sans modifier le nom du fichier. Permet de plonger dans le code et je vais expliquer ce que chaque fonction fait plus tard.

$directory = 'Nature/';
$images = glob($directory."*.jpg");

foreach($images as $image) {
    $im_php = imagecreatefromjpeg($image);
    imagefilter($im_php, IMG_FILTER_GRAYSCALE);
    imagefilter($im_php, IMG_FILTER_CONTRAST, -25);
    $new_name = basename($image); 
    imagejpeg($im_php, $directory.'Grayscale/'.$new_name);
}

Comme vous pouvez le voir, nous chargeons les images du répertoire Nature exactement comme nous l'avons fait pour l'exemple précédent. Cependant, nous utiliserons la fonction imagefilter() cette fois pour appliquer des filtres sur la ressource image chargée.

Notez que imagefilter() modifie l'image d'origine et renvoie TRUE ou FALSE en fonction du succès ou de l'échec de l'opération. Ceci est différent de la fonction imagescale() que nous avons utilisée dans la section précédente et qui renvoyait la ressource d'image mise à l'échelle.

Une autre chose importante à garder à l'esprit est que le filtre de contraste accepte les valeurs de -100 à 100. Les valeurs négatives impliquent davantage de contraste et les valeurs positives impliquent moins de contraste. C'est le contraire de ce à quoi certaines personnes peuvent s’attendre! Une valeur de 0 laissera l'image inchangée.

Le filtre de luminosité a par contre des limites minimale et maximale de -255 et 255. La valeur négative dans ce cas implique une luminosité minimale et la valeur positive une luminosité maximale.

Nous obtenons le nom du fichier à partir du chemin d'accès au fichier en utilisant la fonction basename(), puis sauvegardons l'image en utilisant la fonction imagejpeg().

Dernières pensées

Le but de ce tutoriel était de vous familiariser avec la bibliothèque GD en PHP et d'apprendre à utiliser toutes ces fonctions pour vous simplifier la vie. Vous pouvez utiliser les exemples à la fin du didacticiel comme guide pour écrire vos propres scripts de manipulation d'image. Par exemple, vous pouvez redimensionner une image uniquement si elle est plus large qu'une limite donnée en déterminant sa largeur à l'aide de la fonction imagesx().

Toutes ces fonctions ouvrent de nombreuses possibilités pour faciliter la manipulation des images et vous faire gagner beaucoup de temps. Si vous avez des questions concernant ce tutoriel, faites-le moi savoir dans les commentaires.