Looge Laravelis pisipilt, kasutades sekkumise pildikogu

Viimati uuendatud okt. 17, 2021

Sisu

Veebisaidil tegeleme alati piltidega. Nõude alusel kasutame piltide erinevaid versioone. Arendajatele on hea tava luua ühe pildi erinevad versioonid ehk pisipildid. Neid pisipilte saab kasutada erineva suurusega piltide kuvamisel, sõltuvalt konteineri suurusest. Konteineri suurusele vastava pildi kuvamine säästab ribalaiust ja parandab lehe laadimisaega. Suure pildi kuvamine väikeses konteineris on halb tava ja see kahjustab lehe laadimisaega. Seetõttu on soovitatav luua pildist mitu pisipilti ja kasutada sobivat versiooni, kui see on vajalik.

Selles artiklis uurime, kuidas luua Laravelis pisipilt, kasutades teeki Intervention Image. Sekkumispilt on tasuta ja üks populaarsemaid teoseid piltide manipuleerimiseks. Taustal kasutab see teek piltide manipuleerimiseks GD teeki ja Imagicki.

Selle õpetuse jaoks koostan 3 pisipilti – väikesed, keskmised ja suured, vastavalt suurustega 150 93, 300 * 185, 550 340. Muutke neid suurusi vastavalt teie nõuetele.

Alustamine

Alustamiseks peate kõigepealt installima Laraveli Intervention Image teegi. Avage terminal oma projekti juurkataloogis ja käivitage järgmine käsk:

composer require intervention/image

Pärast teegi installimist avage config/app.phpfail ja lisage sinna järgmised read.

Lisage $providersmassiivi selle paketi teenusepakkujad .

InterventionImageImageServiceProvider::class

Lisage $aliasesmassiivile fassaad .

'Image' => InterventionImageFacadesImage::class

Järgmisena tuleb kataloogi loomiseks vajalike piltide salvestamiseks. Minge terminali ja käivitage käsk järgmiselt:

php artisan storage:link

See käsk loob avaliku kausta alla salvestuskataloogi (sümboolne link). Selles kaustas laadin üles originaalpildi ja selle pisipildid.

Looge Laravelis pisipilt

Oleme kõik seadistanud põhiseadistusega ja saame nüüd tegeliku koodi kirjutada. Loome teie vaatefaili vormi.

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

Kontrolleris peate lisama raamatukogu fassaadi "Pilt", mille oleme config/app.phpfaili lisanud .

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

Fassaadi lisamisega saame helistada Intervention Image teegi funktsioonidele. Allolevas koodis laadin pildi üles kahte kohta. Algne pilt läheb otse storage/profile_imageskausta sisse. Pisipildid salvestatakse storage/profile_images/thumbnailkataloogi. Esmalt laadime algse pildi pisipiltide kausta üles ja seejärel suurust muudame.

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

Ülaltoodud koodis talletan pilti 3 formaadis: väike, keskmine ja suur. Pärast nende salvestamist kutsume meetodi createThumbnailja edastame meetodile vajaliku laiuse, kõrguse. Määratleme selle funktsiooni allpool. See funktsioon peaks minema samasse kontrollerisse.

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

Siin muudame pildi suurust proportsionaalselt. Nii toimides säilitame kuvasuhte ja pilti ei lõigata.

Kui otsite kõva saaki, asendage read allpool

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

Koos

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

Loodetavasti saate aru, kuidas luua sekkumispildi teeki abil pisipilt Laravelis. Tahaksin kuulda teie mõtteid allpool olevast kommentaaride jaotisest.

seotud artiklid

: artisansweb.net