{"id":24626,"date":"2021-05-22T10:34:00","date_gmt":"2021-05-22T07:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24626"},"modified":"2021-10-17T20:45:43","modified_gmt":"2021-10-17T17:45:43","slug":"muuta-kuvan-kokoa-laravelissa-kayttamalla-interventiokuvakirjastoa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/muuta-kuvan-kokoa-laravelissa-kayttamalla-interventiokuvakirjastoa\/","title":{"rendered":"Muuta kuvan kokoa Laravelissa k\u00e4ytt\u00e4m\u00e4ll\u00e4 interventiokuvakirjastoa"},"content":{"rendered":"

\u00c4skett\u00e4in yksi lukijoistamme kysyi kuinka muuttaa kuvan kokoa Laravelissa. Kuvan koon muuttaminen on s\u00e4\u00e4nn\u00f6llinen teht\u00e4v\u00e4 kehitt\u00e4jille. Kehitt\u00e4jien tulisi tehd\u00e4 se oikein. On hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 muuttaa kuvien kokoa s\u00e4ili\u00f6n koon mukaan. Se auttaa parantamaan sivun nopeutta. T\u00e4ss\u00e4 artikkelissa tutkitaan, kuinka Laravel-kuvan kokoa muutetaan Intervention Image -kirjaston avulla.<\/p>\n

Intervention<\/a> kuvakirjasto tarjoaa helpon tavan muuttaa kuvien kokoa. T\u00e4m\u00e4 kirjasto k\u00e4ytt\u00e4\u00e4 GD-kirjastoa ja Imagickia kuvank\u00e4sittelyyn hupun alla.<\/p>\n

Miksi kuvien kokoa tulisi muuttaa?<\/h3>\n

Otetaan esimerkki galleriasta. Kun ty\u00f6skentelet gallerian parissa, n\u00e4yt\u00e4mme yleens\u00e4 pienen pikkukuvan luettelossa. Kun joku napsauttaa pikkukuvaa, n\u00e4yt\u00e4mme alkuper\u00e4isen kuvan. T\u00e4ss\u00e4 pikkukuvat ovat alkuper\u00e4isen kuvan kokoa.<\/p>\n

Oletetaan, ett\u00e4 alkuper\u00e4isen kuvasi koko on 500 500 ja pikkukuva-arkisi koko on 200 200. T\u00e4ss\u00e4 tapauksessa sinun tulee muuttaa alkuper\u00e4isen kuvan kokoa pikkukuvan s\u00e4ili\u00f6koon mukaan. Suurikokoisen kuvan k\u00e4ytt\u00e4minen pieness\u00e4 astiassa on huono k\u00e4yt\u00e4nt\u00f6. Se vaikuttaa verkkosivuston suorituskykyyn.<\/p>\n

T\u00e4m\u00e4 on yksi esimerkki siit\u00e4, miksi meid\u00e4n pit\u00e4isi muuttaa kuvien kokoa. On my\u00f6s monia muita. T\u00e4m\u00e4n j\u00e4lkeen katsotaanpa, kuinka Laravel-kuvan kokoa muutetaan Intervention Image -kirjastolla.<\/p>\n

Asennus<\/h3>\n

Aloittamiseksi sinun on asennettava Intervention Image -kirjasto Laravel-projektiisi. Sinulla on oltava Composer<\/a> asennettuna j\u00e4rjestelm\u00e4\u00e4n. Avaa p\u00e4\u00e4te projektin juurihakemistossa ja suorita alla oleva komento:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Kun olet asentanut kirjaston, avaa config\/app.php<\/code>tiedosto ja lis\u00e4\u00e4 siihen seuraavat rivit.<\/p>\n
Lis\u00e4\u00e4 t\u00e4m\u00e4n paketin palveluntarjoaja $providers<\/code>matriisiin.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Lis\u00e4\u00e4 seuraavaksi julkisivu $aliases<\/code>taulukkoon.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Muuta kuvan kokoa Laravelissa<\/h3>\n
Kuvan koon muuttamiseksi meid\u00e4n on ensin kirjoitettava koodi kuvan lataamista varten. Joten luo ensin hakemisto, johon tallennamme kuvat. Siirry p\u00e4\u00e4telaitteeseen ja suorita komento:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
T\u00e4m\u00e4 komento luo ’storage’ -hakemiston ’public’ -kansioon. Tallennuskansioon tallennetaan kuvien koko ja pikkukuva.<\/p>\n
Luo seuraavaksi lomake n\u00e4kym\u00e4tiedostoon. Lis\u00e4\u00e4n my\u00f6s koodin menestystiedolle ter\u00e4tiedostossa.<\/p>\n
@if (session('success'))\n\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ session('success') }}\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endif\n<form action=\"{{ url('PASS_ACTION_URL') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
Korvaa paikkamerkki ’PASS_ACTION_URL’ reitill\u00e4si.<\/p>\n
Ohjaimessa on lis\u00e4tt\u00e4v\u00e4 config\/app.php<\/code>tiedostoon lis\u00e4tt\u00e4v\u00e4n kirjaston julkisivu ’Image’ .<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\n}<\/code><\/pre>\n
Lis\u00e4\u00e4m\u00e4ll\u00e4 julkisivu voimme kutsua Intervention Image -kirjaston toimintoja. L\u00e4het\u00e4n alla olevan koodin kuvan kahteen paikkaan. Yksi on alkuper\u00e4inen kuva "profile_images" -kansiossa. Toinen on hakemistossa ’profile_images \/ thumbnail’. L\u00e4het\u00e4n ensin alkuper\u00e4isen kuvan pikkukansioon ja muutan sen kokoa.<\/p>\n
public function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($thumbnailpath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\"); \/\/change the route as per your flow\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
T\u00e4ss\u00e4 muutan kuvan kokoa suhteellisesti. N\u00e4in pid\u00e4t kuvasuhteen, eik\u00e4 kuva leikkaa. Olen l\u00e4p\u00e4issyt leveyden 400 ja korkeuden 150. Voit muuttaa n\u00e4it\u00e4 arvoja vaatimuksesi mukaan.<\/p>\n
Jos etsit kovaa rajausta, vaihda rivien alapuolelle<\/p>\n
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($thumbnailpath);<\/code><\/pre>\n
Kanssa<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
T\u00e4m\u00e4n j\u00e4lkeen saat pikkukuvan, jonka koko on 100 * 100.<\/p>\n
Toivon, ett\u00e4 saatat oppia kuvan koon muuttamisesta Laravelissa Intervention Image -kirjaston avulla. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n