{"id":24640,"date":"2021-05-22T11:11:00","date_gmt":"2021-05-22T08:11:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24640"},"modified":"2021-10-18T02:14:41","modified_gmt":"2021-10-17T23:14:41","slug":"redimensionner-l-image-dans-laravel-a-l-aide-de-la-bibliotheque-d-images-d-intervention","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/redimensionner-l-image-dans-laravel-a-l-aide-de-la-bibliotheque-d-images-d-intervention\/","title":{"rendered":"Redimensionner l’image dans Laravel \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention"},"content":{"rendered":"

R\u00e9cemment, un de nos lecteurs a demand\u00e9 comment redimensionner l’image dans Laravel. Le redimensionnement des images est une t\u00e2che r\u00e9guli\u00e8re pour les d\u00e9veloppeurs. Les d\u00e9veloppeurs doivent le faire correctement. C’est une bonne pratique de redimensionner les images en fonction de la taille de son conteneur. Il vous aide \u00e0 am\u00e9liorer la vitesse de la page. Dans cet article, nous \u00e9tudions comment redimensionner l’image dans Laravel \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention.<\/p>\n

La<\/a> biblioth\u00e8que d’ images d’intervention<\/a> permet de redimensionner facilement les images. Cette biblioth\u00e8que utilise GD Library et Imagick pour la manipulation d’images sous le capot.<\/p>\n

Pourquoi redimensionner les images ?<\/h3>\n

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\u00e9e de l’image originale.<\/p>\n

Disons que la taille de votre image d’origine est de 500\u00a0500 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.<\/p>\n

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 \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention.<\/p>\n

Installation<\/h3>\n

Pour commencer, vous devez installer la biblioth\u00e8que d’images d’intervention dans votre projet Laravel. Vous devriez avoir Composer<\/a> install\u00e9 sur votre syst\u00e8me. Ouvrez le terminal dans le r\u00e9pertoire racine de votre projet et ex\u00e9cutez la commande ci-dessous\u00a0:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Apr\u00e8s avoir install\u00e9 la biblioth\u00e8que, ouvrez le config\/app.php<\/code>fichier et ajoutez-y les lignes suivantes.<\/p>\n
Ajoutez le fournisseur de services de ce package \u00e0 la $providers<\/code>baie.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Ajoutez ensuite la fa\u00e7ade au $aliases<\/code>tableau.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Redimensionner l’image dans Laravel<\/h3>\n
Pour redimensionner l’image, nous devons d’abord \u00e9crire le code pour t\u00e9l\u00e9charger une image. Cr\u00e9ez donc d’abord un r\u00e9pertoire o\u00f9 nous stockerons les images. Rendez-vous sur le terminal et ex\u00e9cutez la commande\u00a0:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Cette commande cr\u00e9e un r\u00e9pertoire \u00ab\u00a0stockage\u00a0\u00bb dans le dossier \u00ab\u00a0public\u00a0\u00bb. Dans le dossier \u00ab\u00a0stockage\u00a0\u00bb, nous stockerons une version compl\u00e8te et une version miniature des images.<\/p>\n
Ensuite, cr\u00e9ez un formulaire dans votre fichier de vue. J’ajoute \u00e9galement du code pour le message de r\u00e9ussite dans le fichier blade.<\/p>\n
@if (session('success'))\n\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ session('success') }}\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endif\n<form action=\"{{ url('PASS_ACTION_URL') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
Remplacez l’espace r\u00e9serv\u00e9 "PASS_ACTION_URL" par votre itin\u00e9raire.<\/p>\n
Dans le contr\u00f4leur, il faut ajouter la fa\u00e7ade ‘Image’ d’une biblioth\u00e8que que nous avons ajout\u00e9e dans le config\/app.php<\/code>fichier.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\n}<\/code><\/pre>\n
En ajoutant la fa\u00e7ade, nous pouvons appeler des fonctions de la biblioth\u00e8que d’images d’intervention. Dans le code ci-dessous, je vais t\u00e9l\u00e9charger l’image \u00e0 deux endroits. L’une est l’image d’origine dans le dossier ‘profile_images’. Le second se trouve dans le r\u00e9pertoire ‘profile_images\/thumbnail’. Je vais d’abord t\u00e9l\u00e9charger l’image originale dans le dossier des vignettes, puis la redimensionner.<\/p>\n
public function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($thumbnailpath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\"); \/\/change the route as per your flow\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Ici, je redimensionne l’image proportionnellement. Ce faisant, vous conservez le rapport hauteur\/largeur et l’image ne sera pas coup\u00e9e. J’ai pass\u00e9 la largeur \u00e0 400 et la hauteur \u00e0 150. Vous pouvez modifier ces valeurs selon vos besoins.<\/p>\n
Si vous recherchez un recadrage difficile, remplacez les lignes ci-dessous<\/p>\n
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($thumbnailpath);<\/code><\/pre>\n
Avec<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
Apr\u00e8s cela, vous obtiendrez la vignette avec une dimension de 100*100.<\/p>\n
J’esp\u00e8re que vous pourrez en apprendre davantage sur le redimensionnement de l’image dans Laravel \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n