Ridimensiona l’immagine in Laravel usando la libreria di immagini di intervento

Last updated Ott 18, 2021

Contenuto

Perché dovrebbe ridimensionare le immagini?

Prendiamo l’esempio di una galleria. Mentre lavoriamo su una galleria, normalmente mostriamo la piccola miniatura nell’elenco. Quando qualcuno fa clic sulla miniatura, mostriamo un’immagine originale. Qui, le miniature sono la versione ridimensionata dell’immagine originale.

Supponiamo che la dimensione dell’immagine originale sia 500 500 e che il contenitore delle miniature sia di dimensioni 200 200. In questo caso, dovresti ridimensionare l’immagine originale in base alla dimensione del contenitore della miniatura. Usare un’immagine di grandi dimensioni nel contenitore piccolo è una cattiva pratica. Influisce sulle prestazioni del sito web.

Questo è un esempio del perché dovremmo ridimensionare le immagini. Ce ne sono anche molti altri. Detto questo, diamo un’occhiata a come ridimensionare l’immagine in Laravel usando la libreria Intervention Image.

Installazione

Per iniziare, devi installare la libreria Intervention Image nel tuo progetto Laravel. Dovresti avere Composer installato sul tuo sistema. 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 il fornitore di servizi di questo pacchetto $providersall’array.

InterventionImageImageServiceProvider::class

Quindi aggiungi la facciata $aliasesall’array.

'Image' => InterventionImageFacadesImage::class

Ridimensiona immagine in Laravel

Per ridimensionare l’immagine, dobbiamo prima scrivere il codice per caricare un’immagine. Quindi, prima crea una directory in cui memorizzeremo le immagini. Vai al terminale ed esegui il comando:

php artisan storage:link

Questo comando crea una directory di "archiviazione" nella cartella "pubblica". Nella cartella "archiviazione", memorizzeremo una versione completa e una miniatura delle immagini.

Quindi, crea un modulo nel file di visualizzazione. Sto anche aggiungendo il codice per il messaggio di successo nel file 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>

Sostituisci il segnaposto "PASS_ACTION_URL" con il tuo percorso.

Nel controller è necessario aggiungere la facciata ‘Immagine’ di una libreria 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. Uno è l’immagine originale nella cartella ‘profile_images’. Il secondo si trova nella directory ‘profile_images/thumbnail’. Caricherò prima l’immagine originale nella cartella delle miniature e poi la ridimensionerò.

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

Qui sto ridimensionando l’immagine in modo proporzionale. In questo modo, manterrai le proporzioni e l’immagine non verrà tagliata. Ho superato la larghezza come 400 e l’altezza come 150. Puoi modificare questi valori secondo le tue esigenze.

Se stai cercando un ritaglio duro, sostituisci le righe sottostanti

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

Con

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

Dopodiché, otterrai la miniatura con una dimensione di 100*100.

Spero che tu possa imparare a ridimensionare l’immagine in Laravel usando la libreria di immagini di intervento. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

Ridimensiona l’immagine in Laravel usando la libreria di immagini di intervento

Perché dovrebbe ridimensionare le immagini?

Installazione

Ridimensiona immagine in Laravel

articoli Correlati