{"id":25025,"date":"2021-05-25T11:27:00","date_gmt":"2021-05-25T08:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25025"},"modified":"2021-10-18T03:10:33","modified_gmt":"2021-10-18T00:10:33","slug":"crea-miniature-in-laravel-usando-la-libreria-di-immagini-di-intervento","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/crea-miniature-in-laravel-usando-la-libreria-di-immagini-di-intervento\/","title":{"rendered":"Crea miniature in Laravel usando la libreria di immagini di intervento"},"content":{"rendered":"

Sul sito ci occupiamo sempre delle immagini. In base al requisito utilizziamo diverse versioni di immagini. \u00c8 una buona pratica per gli sviluppatori creare versioni diverse, note anche come miniature della singola immagine. Queste miniature possono essere utilizzate durante la visualizzazione di immagini di dimensioni diverse a seconda delle dimensioni del contenitore. Mostrare un’immagine che si adatta alle dimensioni del contenitore far\u00e0 risparmiare larghezza di banda e migliorer\u00e0 il tempo di caricamento della pagina. Mostrare un’immagine di grandi dimensioni in un piccolo contenitore \u00e8 una cattiva pratica e compromette il tempo di caricamento della pagina. Di conseguenza, si consiglia di creare pi\u00f9 miniature di un’immagine e utilizzare la versione appropriata laddove necessario.<\/p>\n

In questo articolo, studiamo come creare una miniatura in Laravel utilizzando la libreria di immagini di intervento. Intervention Image<\/a> \u00e8 gratuito ed \u00e8 una delle librerie popolari per la manipolazione delle immagini. In background, questa libreria utilizza la libreria GD e Imagick per la manipolazione delle immagini.<\/p>\n

Per questo tutorial, creer\u00f2 3 miniature: piccola, media, grande con dimensioni rispettivamente 150 93, 300*185, 550 340. Modifica queste dimensioni secondo le tue esigenze.<\/p>\n

Iniziare<\/h3>\n

Per iniziare, devi prima installare la libreria Intervention Image in Laravel. Apri il terminale nella directory principale del tuo progetto ed esegui il comando seguente:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Dopo aver installato la libreria, apri il config\/app.php<\/code>file e aggiungi le seguenti righe al suo interno.<\/p>\n
Aggiungi i fornitori di servizi per questo pacchetto $providers<\/code>nell’array.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Aggiungi la facciata $aliases<\/code>all’array.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Successivamente, per memorizzare le immagini dobbiamo creare una directory. Vai al terminale ed esegui il comando come segue:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Questo comando crea una directory di archiviazione (collegamento simbolico) nella cartella pubblica. In questa cartella, caricher\u00f2 l’immagine originale e le sue miniature.<\/p>\n
Crea una miniatura in Laravel<\/h3>\n
Abbiamo impostato tutto con la configurazione di base e ora possiamo scrivere il codice effettivo. Creiamo un modulo nel tuo file di visualizzazione.<\/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
Nel controller, \u00e8 necessario aggiungere la facciata della libreria "Image" che abbiamo aggiunto nel config\/app.php<\/code>file.<\/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
Aggiungendo la facciata, siamo in grado di chiamare le funzioni della libreria Intervention Image. Nel codice sottostante, caricher\u00f2 l’immagine in due posti. L’immagine originale va direttamente all’interno della storage\/profile_images<\/code>cartella. Le miniature verranno archiviate nella storage\/profile_images\/thumbnail<\/code>directory. Per prima cosa carichiamo l’immagine originale nella cartella delle miniature e poi la ridimensioniamo.<\/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
Nel codice sopra, conservo l’immagine con 3 formati piccolo, medio e grande. Dopo averli memorizzati, chiamiamo il metodo createThumbnail<\/code>e passiamo la larghezza e l’altezza richieste al metodo. Definiamo questa funzione di seguito. Questa funzione dovrebbe andare nello stesso controller.<\/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
Qui stiamo ridimensionando l’immagine in modo proporzionale. In questo modo, manteniamo le proporzioni e l’immagine non verr\u00e0 tagliata.<\/p>\n
Se stai cercando un ritaglio duro, sostituisci le righe sottostanti<\/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
Con<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Spero che tu capisca come creare una miniatura in Laravel usando la libreria di immagini di intervento. Mi piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n