Redimensionner l’image en PHP à l’aide de la bibliothèque d’images d’intervention

Dernière mise à jour Oct 18, 2021

Teneur

Pourquoi devrions-nous redimensionner les images ?

Redimensionner l’image en PHP à l’aide d’une image d’intervention

Pourquoi devrions-nous redimensionner les images ?

Sur le site Web, il existe plusieurs scénarios où nous devons afficher une version courte d’une grande image. Un exemple populaire est la Galerie d’images. Dans la galerie, nous avions l’habitude d’afficher une liste de petites images. Lorsqu’un utilisateur clique sur la petite image, la grande image s’ouvre dans la fenêtre contextuelle. Un autre exemple est l’affichage d’articles connexes où nous montrons de petites images avec le titre et la description d’un article.

Dans ces scénarios, nous devons générer une petite image (vignette) en utilisant notre image d’origine. Une petite vignette réduit la taille de vos pages. Comme vous utilisez une petite vignette, le navigateur nécessite une faible bande passante pour charger l’image. Cela ajoutera des avantages au site Web. Certains d’entre eux sont:

Améliore les performances du serveur
Réduire la bande passante
Améliorer la vitesse des pages

Cela étant dit, voyons comment redimensionner l’image en PHP.

Commencer

Intervention Image est une bibliothèque open source qui agit comme un outil de redimensionnement d’image. Sous le capot, Intervention Image utilise GD Library et Imagick pour le traitement et la manipulation des images.

Pour commencer, vous devez installer la bibliothèque d’images d’intervention dans votre application. Je recommande d’utiliser Composer pour l’installation d’une bibliothèque.

Ouvrez le terminal dans le répertoire racine de votre projet et exécutez la commande ci-dessous.

composer require intervention/image

Après avoir installé la bibliothèque, vous devez inclure son environnement dans votre application. Pour cela, incluez ci-dessous deux lignes dans le fichier PHP.

<?php
// include composer autoload
require 'vendor/autoload.php';
  
use InterventionImageImageManagerStatic as Image;

Afin de télécharger et de redimensionner l’image, nous avons besoin d’un formulaire où l’on peut parcourir l’image et cliquer sur le bouton d’envoi. Utilisez le code HTML ci-dessous qui contient l’entrée du fichier et un bouton d’envoi.

<form method="post" enctype="multipart/form-data">
    <p><input type="file" name="image" /></p>
    <input type="submit" name="submit" value="Submit">
</form>

Redimensionner l’image en PHP à l’aide d’une image d’intervention

Nous avons installé la bibliothèque et créé un formulaire. Ensuite, nous devons télécharger et redimensionner l’image à la volée. Je vais créer deux répertoires uploadset thumbnails. Dans le uploadsdossier, nous allons stocker l’image originale. La version miniature de l’image sera stockée dans le thumbnailsrépertoire.

Utilisez le code ci-dessous qui stockera la version originale et la version miniature de l’image dans les répertoires uploadset thumbnailsrespectivement.

<?php
require 'vendor/autoload.php';
  
use InterventionImageImageManagerStatic as Image;
 
$allowed_mime_type = array('image/jpg', 'image/jpeg', 'image/png', 'image/gif');
 
if (isset($_POST['submit'])) {
 
    if (in_array($_FILES['image']['type'], $allowed_mime_type)) {
 
        if (!file_exists('uploads')) {
            mkdir('uploads', 0755);
        }
 
        $filename = time().'_'.$_FILES['image']['name'];
        $filepath = 'uploads/'. $filename;
        move_uploaded_file($_FILES['image']['tmp_name'], $filepath);
 
        if (!file_exists('uploads/thumbnails')) {
            mkdir('uploads/thumbnails', 0755);
        }
 
        $thumbnailpath = 'uploads/thumbnails/'. $filename;
        $img = Image::make($filepath);
        $img->resize(300, null, function ($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
    }
}

Dans le code ci-dessus, j’ai passé la largeur à 300 et redimensionné l’image en maintenant leur rapport hauteur/largeur. Vous pouvez transmettre la valeur de largeur selon vos besoins. Il est recommandé de conserver le rapport hauteur/largeur lors du redimensionnement de l’image. En utilisant le rapport hauteur/largeur, l’image ne s’étirera pas. Cependant, si vous recherchez un recadrage difficile, remplacez les lignes ci-dessous

$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

Avec

$img->resize(300, 150)->save($thumbnailpath);

Conclusion

Dans ce tutoriel, nous avons étudié comment redimensionner des images en conservant leur rapport hauteur/largeur. Nous avons également écrit un code qui recadrera fortement l’image. La bibliothèque d’images d’intervention fournit quelques options supplémentaires pour une resizeméthode. Vous pouvez en savoir plus à ce sujet sur leur documentation.

Articles Liés

Source d’enregistrement: artisansweb.net