Luo pikkukuva Laraveliin käyttämällä Interventiokuvakirjastoa

Viimeisin päivitys loka 17, 2021

Sisältö

Verkkosivustolla käsittelemme aina kuvia. Vaatimuksen perusteella käytämme eri kuvaversioita. Kehittäjille on hyvä tapa luoda erilaisia versioita eli pikkukuvia yhdestä kuvasta. Näitä pikkukuvia voidaan käyttää näytettäessä erikokoisia kuvia säiliön koosta riippuen. Säiliön koon mukaan sopivan kuvan näyttäminen säästää kaistanleveyttä ja parantaa sivun latausaikaa. Suurikokoisen kuvan näyttäminen pienessä säiliössä on huono käytäntö ja vaarantaa sivun latausajan. Tuloksena on suositeltavaa luoda kuvasta useita pikkukuvia ja käyttää aina sopivaa versiota.

Tässä artikkelissa tutkitaan, kuinka luoda pikkukuva Laraveliin Intervention Image -kirjaston avulla. Interventiokuva on ilmainen ja yksi suosituimmista kuvankäsittelykirjastoista. Taustalla tämä kirjasto käyttää GD-kirjastoa ja Imagickia kuvankäsittelyyn.

Tätä opetusohjelmaa varten luon kolme pikkukuvaa – pienet, keskisuuret, suuret koot 150 93, 300 * 185, 550 340. Muuta näitä kokoja vaatimuksesi mukaan.

Päästä alkuun

Aloittamiseksi sinun on ensin asennettava Intervention Image -kirjasto Laraveliin. Avaa pääte projektin juurihakemistossa ja suorita alla oleva komento:

composer require intervention/image

Kun olet asentanut kirjaston, avaa config/app.phptiedosto ja lisää siihen seuraavat rivit.

Lisää tämän paketin palveluntarjoajat $providersmatriisiin.

InterventionImageImageServiceProvider::class

Lisää julkisivu $aliasestaulukkoon.

'Image' => InterventionImageFacadesImage::class

Seuraavaksi, jotta voimme tallentaa kuvat, meidän on luotava hakemisto. Siirry päätelaitteeseen ja suorita komento seuraavasti:

php artisan storage:link

Tämä komento luo tallennushakemiston (symbolinen linkki) julkiseen kansioon. Lähetän tähän kansioon alkuperäisen kuvan ja sen pikkukuvat.

Luo pikkukuva Laraveliin

Olemme kaikki asettaneet perusasetukset ja voimme nyt kirjoittaa todellisen koodin. Luodaan lomake näkymätiedostoon.

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

Ohjaimessa sinun on lisättävä kirjaston julkisivu ‘Image’, jonka olemme lisänneet config/app.phptiedostoon.

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

Lisäämällä julkisivu voimme kutsua Intervention Image -kirjaston toimintoja. Lähetän alla olevan koodin kuvan kahteen paikkaan. Alkuperäinen kuva menee suoraan storage/profile_imageskansion sisään. Pikkukuvat tallennetaan storage/profile_images/thumbnailhakemistoon. Lähetämme alkuperäisen kuvan ensin pikkukansioon ja muutamme sen kokoa.

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

Yllä olevaan koodiin tallennan kuvan kolmella pienellä, keskisuurella ja suurella formaatilla. Niiden tallentamisen jälkeen kutsumme menetelmää createThumbnailja välitämme vaaditun leveyden, korkeuden menetelmään. Määritetään tämä funktio alla. Tämän toiminnon tulisi siirtyä samaan ohjaimeen.

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

Tässä muutamme kuvan kokoa suhteellisesti. Näin pidämme kuvasuhteen ennallaan, eikä kuva leikkaa.

Jos etsit kovaa satoa, vaihda alla olevat viivat

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

Kanssa

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

Toivon, että ymmärrät kuinka luoda pikkukuva Laraveliin Intervention Image -kirjastolla. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.

Aiheeseen liittyvät artikkelit

: artisansweb.net