{"id":24775,"date":"2021-05-25T11:13:00","date_gmt":"2021-05-25T08:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24775"},"modified":"2021-10-18T02:13:48","modified_gmt":"2021-10-17T23:13:48","slug":"creer-une-vignette-dans-laravel-a-l-aide-de-la-bibliotheque-d-images-d-intervention","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/creer-une-vignette-dans-laravel-a-l-aide-de-la-bibliotheque-d-images-d-intervention\/","title":{"rendered":"Cr\u00e9er une vignette dans Laravel \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention"},"content":{"rendered":"

Sur le site Web, nous nous occupons toujours des images. En fonction des besoins, nous utilisons diff\u00e9rentes versions d’images. C’est une bonne pratique pour les d\u00e9veloppeurs de cr\u00e9er diff\u00e9rentes versions, c’est-\u00e0-dire des vignettes de l’image unique. Ces vignettes peuvent \u00eatre utilis\u00e9es tout en affichant diff\u00e9rentes tailles d’images en fonction de la taille du conteneur. L’affichage d’une image adapt\u00e9e \u00e0 la taille du conteneur \u00e9conomisera de la bande passante et am\u00e9liorera le temps de chargement de la page. Afficher une image de grande taille dans un petit conteneur est une mauvaise pratique et compromet le temps de chargement de la page. Par cons\u00e9quent, il est recommand\u00e9 de cr\u00e9er plusieurs vignettes d’une image et d’utiliser la version appropri\u00e9e si n\u00e9cessaire.<\/p>\n

Dans cet article, nous \u00e9tudions comment cr\u00e9er une vignette dans Laravel \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention. Intervention Image<\/a> est gratuite et l’une des biblioth\u00e8ques populaires pour la manipulation d’images. En arri\u00e8re-plan, cette biblioth\u00e8que utilise la biblioth\u00e8que GD et Imagick pour la manipulation d’images.<\/p>\n

Pour ce tutoriel, je vais cr\u00e9er 3 vignettes \u2013 petite, moyenne, grande avec les tailles 150 93, 300*185, 550 340 respectivement. Modifiez ces tailles selon vos besoins.<\/p>\n

Commencer<\/h3>\n

Pour commencer, vous devez d’abord installer la biblioth\u00e8que d’images d’intervention dans Laravel. 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 les fournisseurs de services pour ce package dans le $providers<\/code>tableau.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Ajoutez la fa\u00e7ade au $aliases<\/code>tableau.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Ensuite, pour stocker les images, nous devons cr\u00e9er un r\u00e9pertoire. Rendez-vous sur le terminal et ex\u00e9cutez la commande comme suit\u00a0:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Cette commande cr\u00e9e un r\u00e9pertoire de stockage (lien symbolique) sous le dossier public. Dans ce dossier, je vais t\u00e9l\u00e9charger l’image originale et ses vignettes.<\/p>\n
Cr\u00e9er une vignette dans Laravel<\/h3>\n
Nous avons tous r\u00e9gl\u00e9 avec la configuration de base et pouvons maintenant \u00e9crire le code r\u00e9el. Cr\u00e9ons un formulaire dans votre fichier de vue.<\/p>\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
Dans le contr\u00f4leur, vous devez ajouter la fa\u00e7ade de la biblioth\u00e8que ‘Image’ que nous avons ajout\u00e9e dans le config\/app.php<\/code>fichier.<\/p>\n
<?php\n\u00a0\u00a0\nnamespace AppHttpControllers;\n\u00a0\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\u00a0\nclass ImageController extends Controller\n{\n\u00a0\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’image originale va directement dans le storage\/profile_images<\/code>dossier. Les vignettes seraient stock\u00e9es dans le storage\/profile_images\/thumbnail<\/code>r\u00e9pertoire. Nous t\u00e9l\u00e9chargeons d’abord l’image originale dans le dossier des vignettes, puis la redimensionnons.<\/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\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\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\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\/\/small thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnail = $filename.'_small_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/medium thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/large thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnail = $filename.'_large_'.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', $smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $largethumbnail);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create small thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($smallthumbnailpath, 150, 93);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create medium thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($mediumthumbnailpath, 300, 185);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create large thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$largethumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($largethumbnailpath, 550, 340);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Dans le code ci-dessus, je stocke l’image avec 3 formats petit, moyen et grand. Apr\u00e8s les avoir stock\u00e9es, nous appelons la m\u00e9thode createThumbnail<\/code>et passons la largeur et la hauteur requises \u00e0 la m\u00e9thode. D\u00e9finissons cette fonction ci-dessous. Cette fonction doit aller dans le m\u00eame contr\u00f4leur.<\/p>\n
\/**\n\u00a0* Create a thumbnail of specified size\n\u00a0*\n\u00a0* @param string $path path of thumbnail\n\u00a0* @param int $width\n\u00a0* @param int $height\n\u00a0*\/\npublic function createThumbnail($path, $width, $height)\n{\n\u00a0\u00a0\u00a0\u00a0$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0$img->save($path);\n}<\/code><\/pre>\n
Ici, nous redimensionnons l’image proportionnellement. Ce faisant, nous gardons le rapport hauteur\/largeur et l’image ne sera pas coup\u00e9e.<\/p>\n
Si vous recherchez un recadrage difficile, remplacez les lignes ci-dessous<\/p>\n
$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($path);<\/code><\/pre>\n
Avec<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
J’esp\u00e8re que vous comprendrez comment cr\u00e9er une vignette dans Laravel \u00e0 l’aide de la biblioth\u00e8que d’images d’intervention. J’aimerais entendre vos pens\u00e9es dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n