Redimensionner l’image dans Laravel à l’aide de la bibliothèque d’images d’intervention

Dernière mise à jour Oct 18, 2021

Teneur

Pourquoi redimensionner les images ?

Prenons l’exemple d’une galerie. Lorsque nous travaillons sur une galerie, nous affichons normalement la petite vignette dans la liste. Lorsque quelqu’un clique sur la vignette, nous montrons une image originale. Ici, les vignettes sont la version redimensionnée de l’image originale.

Disons que la taille de votre image d’origine est de 500 500 et que votre conteneur de vignettes est de taille 200200. Dans ce cas, vous devez redimensionner l’image d’origine en fonction de la taille du conteneur de vignettes. L’utilisation d’une image de grande taille dans le petit conteneur est une mauvaise pratique. Cela affecte les performances du site Web.

Ceci est un exemple de la raison pour laquelle nous devrions redimensionner les images. Il y en a bien d’autres aussi. Cela dit, voyons comment redimensionner l’image dans Laravel à l’aide de la bibliothèque d’images d’intervention.

Installation

Pour commencer, vous devez installer la bibliothèque d’images d’intervention dans votre projet Laravel. Vous devriez avoir Composer installé sur votre système. 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, ouvrez le config/app.phpfichier et ajoutez-y les lignes suivantes.

Ajoutez le fournisseur de services de ce package à la $providersbaie.

InterventionImageImageServiceProvider::class

Ajoutez ensuite la façade au $aliasestableau.

'Image' => InterventionImageFacadesImage::class

Redimensionner l’image dans Laravel

Pour redimensionner l’image, nous devons d’abord écrire le code pour télécharger une image. Créez donc d’abord un répertoire où nous stockerons les images. Rendez-vous sur le terminal et exécutez la commande :

php artisan storage:link

Cette commande crée un répertoire « stockage » dans le dossier « public ». Dans le dossier « stockage », nous stockerons une version complète et une version miniature des images.

Ensuite, créez un formulaire dans votre fichier de vue. J’ajoute également du code pour le message de réussite dans le fichier blade.

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
<form action="{{ url('PASS_ACTION_URL') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Remplacez l’espace réservé "PASS_ACTION_URL" par votre itinéraire.

Dans le contrôleur, il faut ajouter la façade ‘Image’ d’une bibliothèque que nous avons ajoutée dans le config/app.phpfichier.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Image;
 
class ImageController extends Controller
{
 
}

En ajoutant la façade, nous pouvons appeler des fonctions de la bibliothèque d’images d’intervention. Dans le code ci-dessous, je vais télécharger l’image à deux endroits. L’une est l’image d’origine dans le dossier ‘profile_images’. Le second se trouve dans le répertoire ‘profile_images/thumbnail’. Je vais d’abord télécharger l’image originale dans le dossier des vignettes, puis la redimensionner.

public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();
 
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
 
        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();
 
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $filenametostore);
 
        //Resize image here
        $thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
        $img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
 
        return redirect('image')->with('success', "Image uploaded successfully."); //change the route as per your flow
    }
}

Ici, je redimensionne l’image proportionnellement. Ce faisant, vous conservez le rapport hauteur/largeur et l’image ne sera pas coupée. J’ai passé la largeur à 400 et la hauteur à 150. Vous pouvez modifier ces valeurs selon vos besoins.

Si vous recherchez un recadrage difficile, remplacez les lignes ci-dessous

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

Avec

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

Après cela, vous obtiendrez la vignette avec une dimension de 100*100.

J’espère que vous pourrez en apprendre davantage sur le redimensionnement de l’image dans Laravel à l’aide de la bibliothèque d’images d’intervention. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net