{"id":24764,"date":"2021-05-25T11:10:00","date_gmt":"2021-05-25T08:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24764"},"modified":"2021-10-17T20:41:04","modified_gmt":"2021-10-17T17:41:04","slug":"luo-pikkukuva-laraveliin-kayttamalla-interventiokuvakirjastoa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/luo-pikkukuva-laraveliin-kayttamalla-interventiokuvakirjastoa\/","title":{"rendered":"Luo pikkukuva Laraveliin k\u00e4ytt\u00e4m\u00e4ll\u00e4 Interventiokuvakirjastoa"},"content":{"rendered":"

Verkkosivustolla k\u00e4sittelemme aina kuvia. Vaatimuksen perusteella k\u00e4yt\u00e4mme eri kuvaversioita. Kehitt\u00e4jille on hyv\u00e4 tapa luoda erilaisia \u200b\u200bversioita eli pikkukuvia yhdest\u00e4 kuvasta. N\u00e4it\u00e4 pikkukuvia voidaan k\u00e4ytt\u00e4\u00e4 n\u00e4ytett\u00e4ess\u00e4 erikokoisia kuvia s\u00e4ili\u00f6n koosta riippuen. S\u00e4ili\u00f6n koon mukaan sopivan kuvan n\u00e4ytt\u00e4minen s\u00e4\u00e4st\u00e4\u00e4 kaistanleveytt\u00e4 ja parantaa sivun latausaikaa. Suurikokoisen kuvan n\u00e4ytt\u00e4minen pieness\u00e4 s\u00e4ili\u00f6ss\u00e4 on huono k\u00e4yt\u00e4nt\u00f6 ja vaarantaa sivun latausajan. Tuloksena on suositeltavaa luoda kuvasta useita pikkukuvia ja k\u00e4ytt\u00e4\u00e4 aina sopivaa versiota.<\/p>\n

T\u00e4ss\u00e4 artikkelissa tutkitaan, kuinka luoda pikkukuva Laraveliin Intervention Image -kirjaston avulla. Interventiokuva<\/a> on ilmainen ja yksi suosituimmista kuvank\u00e4sittelykirjastoista. Taustalla t\u00e4m\u00e4 kirjasto k\u00e4ytt\u00e4\u00e4 GD-kirjastoa ja Imagickia kuvank\u00e4sittelyyn.<\/p>\n

T\u00e4t\u00e4 opetusohjelmaa varten luon kolme pikkukuvaa – pienet, keskisuuret, suuret koot 150 93, 300 * 185, 550 340. Muuta n\u00e4it\u00e4 kokoja vaatimuksesi mukaan.<\/p>\n

P\u00e4\u00e4st\u00e4 alkuun<\/h3>\n

Aloittamiseksi sinun on ensin asennettava Intervention Image -kirjasto Laraveliin. 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 palveluntarjoajat $providers<\/code>matriisiin.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Lis\u00e4\u00e4 julkisivu $aliases<\/code>taulukkoon.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Seuraavaksi, jotta voimme tallentaa kuvat, meid\u00e4n on luotava hakemisto. Siirry p\u00e4\u00e4telaitteeseen ja suorita komento seuraavasti:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
T\u00e4m\u00e4 komento luo tallennushakemiston (symbolinen linkki) julkiseen kansioon. L\u00e4het\u00e4n t\u00e4h\u00e4n kansioon alkuper\u00e4isen kuvan ja sen pikkukuvat.<\/p>\n
Luo pikkukuva Laraveliin<\/h3>\n
Olemme kaikki asettaneet perusasetukset ja voimme nyt kirjoittaa todellisen koodin. Luodaan lomake n\u00e4kym\u00e4tiedostoon.<\/p>\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
Ohjaimessa sinun on lis\u00e4tt\u00e4v\u00e4 kirjaston julkisivu ’Image’, jonka olemme lis\u00e4nneet config\/app.php<\/code>tiedostoon.<\/p>\n
<?php\n\u00a0\u00a0\nnamespace AppHttpControllers;\n\u00a0\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\u00a0\nclass ImageController extends Controller\n{\n\u00a0\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. Alkuper\u00e4inen kuva menee suoraan storage\/profile_images<\/code>kansion sis\u00e4\u00e4n. Pikkukuvat tallennetaan storage\/profile_images\/thumbnail<\/code>hakemistoon. L\u00e4het\u00e4mme alkuper\u00e4isen kuvan ensin pikkukansioon ja muutamme 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\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\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\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\/\/small thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnail = $filename.'_small_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/medium thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/large thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnail = $filename.'_large_'.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', $smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $largethumbnail);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create small thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($smallthumbnailpath, 150, 93);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create medium thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($mediumthumbnailpath, 300, 185);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create large thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$largethumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($largethumbnailpath, 550, 340);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Yll\u00e4 olevaan koodiin tallennan kuvan kolmella pienell\u00e4, keskisuurella ja suurella formaatilla. Niiden tallentamisen j\u00e4lkeen kutsumme menetelm\u00e4\u00e4 createThumbnail<\/code>ja v\u00e4lit\u00e4mme vaaditun leveyden, korkeuden menetelm\u00e4\u00e4n. M\u00e4\u00e4ritet\u00e4\u00e4n t\u00e4m\u00e4 funktio alla. T\u00e4m\u00e4n toiminnon tulisi siirty\u00e4 samaan ohjaimeen.<\/p>\n
\/**\n\u00a0* Create a thumbnail of specified size\n\u00a0*\n\u00a0* @param string $path path of thumbnail\n\u00a0* @param int $width\n\u00a0* @param int $height\n\u00a0*\/\npublic function createThumbnail($path, $width, $height)\n{\n\u00a0\u00a0\u00a0\u00a0$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0$img->save($path);\n}<\/code><\/pre>\n
T\u00e4ss\u00e4 muutamme kuvan kokoa suhteellisesti. N\u00e4in pid\u00e4mme kuvasuhteen ennallaan, eik\u00e4 kuva leikkaa.<\/p>\n
Jos etsit kovaa satoa, vaihda alla olevat viivat<\/p>\n
$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($path);<\/code><\/pre>\n
Kanssa<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka luoda pikkukuva Laraveliin Intervention Image -kirjastolla. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n