Skapa miniatyrbild i Laravel med hjälp av interventionsbildbiblioteket

Senaste uppdateringen okt 17, 2021

Innehåll

På webbplatsen hanterar vi alltid bilderna. Baserat på kravet använder vi olika versioner av bilder. Det är en bra praxis för utvecklare att skapa olika versioner, aka miniatyrer av den ena bilden. Dessa miniatyrer kan användas medan olika bildstorlekar visas beroende på behållarens storlek. Om du visar en bild som passar per containerstorlek sparar du bandbredd och förbättrar sidens laddningstid. Att visa en storbildsbild i en liten behållare är dålig praxis och äventyrar sidens laddningstid. Som ett resultat rekommenderas att du skapar flera miniatyrer av en bild och använder lämplig version där det behövs.

I den här artikeln studerar vi hur man skapar en miniatyrbild i Laravel med hjälp av Intervention Image-biblioteket. Intervention Image är gratis och ett av de populära biblioteken för bildmanipulation. I bakgrunden använder detta bibliotek GD Library och Imagick för bildmanipulation.

För den här handledningen skapar jag tre miniatyrer – små, medelstora, stora med storlekarna 150 93, 300 * 185, 550 340 respektive. Ändra dessa storlekar enligt dina krav.

Komma igång

För att komma igång måste du först installera Intervention Image-biblioteket i Laravel. Öppna terminalen i din projektkatalog och kör kommandot nedan:

composer require intervention/image

Efter att ha installerat biblioteket, öppna config/app.phpfilen och lägg till följande rader i den.

Lägg till tjänsteleverantörer för detta paket i $providersmatrisen.

InterventionImageImageServiceProvider::class

Lägg till fasaden i $aliasesmatrisen.

'Image' => InterventionImageFacadesImage::class

Därefter för att lagra bilderna behöver vi skapa en katalog. Gå över till terminalen och kör kommandot enligt följande:

php artisan storage:link

Detta kommando skapar en lagringskatalog (symbolisk länk) under den offentliga mappen. I den här mappen laddar jag upp originalbilden och dess miniatyrer.

Skapa en miniatyrbild i Laravel

Vi ställer alla in med grundinställningen och kan nu skriva den faktiska koden. Låt oss skapa ett formulär i din visningsfil.

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

I styrenheten måste du lägga till biblioteksfasaden ‘Bild’ som vi har lagt till i config/app.phpfilen.

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

Genom att lägga till fasaden kan vi anropa funktioner i Intervention Image Library. I koden nedan laddar jag upp bilden på två ställen. Originalbilden går direkt in i storage/profile_imagesmappen. Miniatyrbilderna sparas under storage/profile_images/thumbnailkatalogen. Vi laddar först upp originalbilden i miniatyrmappen och ändrar sedan storlek på den.

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.");
    }
}

I koden ovan lagrar jag bilden med tre format små, medelstora och stora. Efter att ha lagrat dem ringer vi metoden createThumbnailoch skickar önskad bredd, höjd till metoden. Låt oss definiera den här funktionen nedan. Denna funktion ska gå till samma styrenhet.

/**
 * 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);
}

Här ändrar vi storleken på bilden proportionellt. Genom att göra det behåller vi bildförhållandet och bilden skärs inte av.

Om du letar efter hård skörd, byt ut nedanför raderna

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

Med

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

Jag hoppas att du förstår hur du skapar en miniatyrbild i Laravel med hjälp av Intervention Image-biblioteket. Jag skulle vilja höra dina tankar i kommentarfältet nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net