Muuta kuvan kokoa Laravelissa käyttämällä interventiokuvakirjastoa
Äskettäin yksi lukijoistamme kysyi kuinka muuttaa kuvan kokoa Laravelissa. Kuvan koon muuttaminen on säännöllinen tehtävä kehittäjille. Kehittäjien tulisi tehdä se oikein. On hyvä käytäntö muuttaa kuvien kokoa säiliön koon mukaan. Se auttaa parantamaan sivun nopeutta. Tässä artikkelissa tutkitaan, kuinka Laravel-kuvan kokoa muutetaan Intervention Image -kirjaston avulla.
Intervention kuvakirjasto tarjoaa helpon tavan muuttaa kuvien kokoa. Tämä kirjasto käyttää GD-kirjastoa ja Imagickia kuvankäsittelyyn hupun alla.
Miksi kuvien kokoa tulisi muuttaa?
Otetaan esimerkki galleriasta. Kun työskentelet gallerian parissa, näytämme yleensä pienen pikkukuvan luettelossa. Kun joku napsauttaa pikkukuvaa, näytämme alkuperäisen kuvan. Tässä pikkukuvat ovat alkuperäisen kuvan kokoa.
Oletetaan, että alkuperäisen kuvasi koko on 500 500 ja pikkukuva-arkisi koko on 200 200. Tässä tapauksessa sinun tulee muuttaa alkuperäisen kuvan kokoa pikkukuvan säiliökoon mukaan. Suurikokoisen kuvan käyttäminen pienessä astiassa on huono käytäntö. Se vaikuttaa verkkosivuston suorituskykyyn.
Tämä on yksi esimerkki siitä, miksi meidän pitäisi muuttaa kuvien kokoa. On myös monia muita. Tämän jälkeen katsotaanpa, kuinka Laravel-kuvan kokoa muutetaan Intervention Image -kirjastolla.
Asennus
Aloittamiseksi sinun on asennettava Intervention Image -kirjasto Laravel-projektiisi. Sinulla on oltava Composer asennettuna järjestelmään. Avaa pääte projektin juurihakemistossa ja suorita alla oleva komento:
composer require intervention/imageKun olet asentanut kirjaston, avaa config/app.phptiedosto ja lisää siihen seuraavat rivit.
Lisää tämän paketin palveluntarjoaja $providersmatriisiin.
InterventionImageImageServiceProvider::classLisää seuraavaksi julkisivu $aliasestaulukkoon.
'Image' => InterventionImageFacadesImage::classMuuta kuvan kokoa Laravelissa
Kuvan koon muuttamiseksi meidän on ensin kirjoitettava koodi kuvan lataamista varten. Joten luo ensin hakemisto, johon tallennamme kuvat. Siirry päätelaitteeseen ja suorita komento:
php artisan storage:linkTämä komento luo ‘storage’ -hakemiston ‘public’ -kansioon. Tallennuskansioon tallennetaan kuvien koko ja pikkukuva.
Luo seuraavaksi lomake näkymätiedostoon. Lisään myös koodin menestystiedolle terätiedostossa.
@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>Korvaa paikkamerkki ‘PASS_ACTION_URL’ reitilläsi.
Ohjaimessa on lisättävä config/app.phptiedostoon lisättävän kirjaston julkisivu ‘Image’ .
<?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. Yksi on alkuperäinen kuva "profile_images" -kansiossa. Toinen on hakemistossa ‘profile_images / thumbnail’. Lähetän ensin alkuperäisen kuvan pikkukansioon ja muutan 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;
//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
}
}Tässä muutan kuvan kokoa suhteellisesti. Näin pidät kuvasuhteen, eikä kuva leikkaa. Olen läpäissyt leveyden 400 ja korkeuden 150. Voit muuttaa näitä arvoja vaatimuksesi mukaan.
Jos etsit kovaa rajausta, vaihda rivien alapuolelle
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
$constraint->aspectRatio();
});
$img->save($thumbnailpath);Kanssa
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);Tämän jälkeen saat pikkukuvan, jonka koko on 100 * 100.
Toivon, että saatat oppia kuvan koon muuttamisesta Laravelissa Intervention Image -kirjaston avulla. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.