Crea miniature in Laravel usando la libreria di immagini di intervento

Sul sito ci occupiamo sempre delle immagini. In base al requisito utilizziamo diverse versioni di immagini. È 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à risparmiare larghezza di banda e migliorerà il tempo di caricamento della pagina. Mostrare un’immagine di grandi dimensioni in un piccolo contenitore è una cattiva pratica e compromette il tempo di caricamento della pagina. Di conseguenza, si consiglia di creare più miniature di un’immagine e utilizzare la versione appropriata laddove necessario.

In questo articolo, studiamo come creare una miniatura in Laravel utilizzando la libreria di immagini di intervento. Intervention Image è gratuito ed è una delle librerie popolari per la manipolazione delle immagini. In background, questa libreria utilizza la libreria GD e Imagick per la manipolazione delle immagini.

Per questo tutorial, creerò 3 miniature: piccola, media, grande con dimensioni rispettivamente 150 93, 300*185, 550 340. Modifica queste dimensioni secondo le tue esigenze.

Iniziare

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:

composer require intervention/image

Dopo aver installato la libreria, apri il config/app.phpfile e aggiungi le seguenti righe al suo interno.

Aggiungi i fornitori di servizi per questo pacchetto $providersnell’array.

InterventionImageImageServiceProvider::class

Aggiungi la facciata $aliasesall’array.

'Image' => InterventionImageFacadesImage::class

Successivamente, per memorizzare le immagini dobbiamo creare una directory. Vai al terminale ed esegui il comando come segue:

php artisan storage:link

Questo comando crea una directory di archiviazione (collegamento simbolico) nella cartella pubblica. In questa cartella, caricherò l’immagine originale e le sue miniature.

Crea una miniatura in Laravel

Abbiamo impostato tutto con la configurazione di base e ora possiamo scrivere il codice effettivo. Creiamo un modulo nel tuo file di visualizzazione.

<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>

Nel controller, è necessario aggiungere la facciata della libreria "Image" che abbiamo aggiunto nel config/app.phpfile.

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

Aggiungendo la facciata, siamo in grado di chiamare le funzioni della libreria Intervention Image. Nel codice sottostante, caricherò l’immagine in due posti. L’immagine originale va direttamente all’interno della storage/profile_imagescartella. Le miniature verranno archiviate nella storage/profile_images/thumbnaildirectory. Per prima cosa carichiamo l’immagine originale nella cartella delle miniature e poi la ridimensioniamo.

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;
 
        //small thumbnail name
        $smallthumbnail = $filename.'_small_'.time().'.'.$extension;
 
        //medium thumbnail name
        $mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;
 
        //large thumbnail name
        $largethumbnail = $filename.'_large_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $smallthumbnail);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $mediumthumbnail);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $largethumbnail);
  
        //create small thumbnail
        $smallthumbnailpath = public_path('storage/profile_images/thumbnail/'.$smallthumbnail);
        $this->createThumbnail($smallthumbnailpath, 150, 93);
 
        //create medium thumbnail
        $mediumthumbnailpath = public_path('storage/profile_images/thumbnail/'.$mediumthumbnail);
        $this->createThumbnail($mediumthumbnailpath, 300, 185);
 
        //create large thumbnail
        $largethumbnailpath = public_path('storage/profile_images/thumbnail/'.$largethumbnail);
        $this->createThumbnail($largethumbnailpath, 550, 340);
  
        return redirect('image')->with('success', "Image uploaded successfully.");
    }
}

Nel codice sopra, conservo l’immagine con 3 formati piccolo, medio e grande. Dopo averli memorizzati, chiamiamo il metodo createThumbnaile passiamo la larghezza e l’altezza richieste al metodo. Definiamo questa funzione di seguito. Questa funzione dovrebbe andare nello stesso controller.

/**
 * Create a thumbnail of specified size
 *
 * @param string $path path of thumbnail
 * @param int $width
 * @param int $height
 */
public function createThumbnail($path, $width, $height)
{
    $img = Image::make($path)->resize($width, $height, function ($constraint) {
        $constraint->aspectRatio();
    });
    $img->save($path);
}

Qui stiamo ridimensionando l’immagine in modo proporzionale. In questo modo, manteniamo le proporzioni e l’immagine non verrà tagliata.

Se stai cercando un ritaglio duro, sostituisci le righe sottostanti

$img = Image::make($path)->resize($width, $height, function ($constraint) {
    $constraint->aspectRatio();
});
$img->save($path);

Con

$img = Image::make($path)->resize($width, $height)->save($path);

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.

articoli Correlati

• Ridimensiona l’immagine in Laravel usando la libreria di immagini di intervento
• Una guida per caricare e comprimere immagini in Laravel
• Carica e ridimensiona più immagini in Laravel