{"id":25171,"date":"2021-05-25T10:45:00","date_gmt":"2021-05-25T07:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25171"},"modified":"2021-10-17T18:49:59","modified_gmt":"2021-10-17T15:49:59","slug":"looge-laravelis-pisipilt-kasutades-sekkumise-pildikogu","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/looge-laravelis-pisipilt-kasutades-sekkumise-pildikogu\/","title":{"rendered":"Looge Laravelis pisipilt, kasutades sekkumise pildikogu"},"content":{"rendered":"

Veebisaidil tegeleme alati piltidega. N\u00f5ude alusel kasutame piltide erinevaid versioone. Arendajatele on hea tava luua \u00fche pildi erinevad versioonid ehk pisipildid. Neid pisipilte saab kasutada erineva suurusega piltide kuvamisel, s\u00f5ltuvalt konteineri suurusest. Konteineri suurusele vastava pildi kuvamine s\u00e4\u00e4stab ribalaiust ja parandab lehe laadimisaega. Suure pildi kuvamine v\u00e4ikeses konteineris on halb tava ja see kahjustab lehe laadimisaega. Seet\u00f5ttu on soovitatav luua pildist mitu pisipilti ja kasutada sobivat versiooni, kui see on vajalik.<\/p>\n

Selles artiklis uurime, kuidas luua Laravelis pisipilt, kasutades teeki Intervention Image. Sekkumispilt<\/a> on tasuta ja \u00fcks populaarsemaid teoseid piltide manipuleerimiseks. Taustal kasutab see teek piltide manipuleerimiseks GD teeki ja Imagicki.<\/p>\n

Selle \u00f5petuse jaoks koostan 3 pisipilti – v\u00e4ikesed, keskmised ja suured, vastavalt suurustega 150 93, 300 * 185, 550 340. Muutke neid suurusi vastavalt teie n\u00f5uetele.<\/p>\n

Alustamine<\/h3>\n

Alustamiseks peate k\u00f5igepealt installima Laraveli Intervention Image teegi. Avage terminal oma projekti juurkataloogis ja k\u00e4ivitage j\u00e4rgmine k\u00e4sk:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
P\u00e4rast teegi installimist avage config\/app.php<\/code>fail ja lisage sinna j\u00e4rgmised read.<\/p>\n
Lisage $providers<\/code>massiivi selle paketi teenusepakkujad .<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Lisage $aliases<\/code>massiivile fassaad .<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
J\u00e4rgmisena tuleb kataloogi loomiseks vajalike piltide salvestamiseks. Minge terminali ja k\u00e4ivitage k\u00e4sk j\u00e4rgmiselt:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
See k\u00e4sk loob avaliku kausta alla salvestuskataloogi (s\u00fcmboolne link). Selles kaustas laadin \u00fcles originaalpildi ja selle pisipildid.<\/p>\n
Looge Laravelis pisipilt<\/h3>\n
Oleme k\u00f5ik seadistanud p\u00f5hiseadistusega ja saame n\u00fc\u00fcd tegeliku koodi kirjutada. Loome teie vaatefaili vormi.<\/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
Kontrolleris peate lisama raamatukogu fassaadi "Pilt", mille oleme config\/app.php<\/code>faili lisanud .<\/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
Fassaadi lisamisega saame helistada Intervention Image teegi funktsioonidele. Allolevas koodis laadin pildi \u00fcles kahte kohta. Algne pilt l\u00e4heb otse storage\/profile_images<\/code>kausta sisse. Pisipildid salvestatakse storage\/profile_images\/thumbnail<\/code>kataloogi. Esmalt laadime algse pildi pisipiltide kausta \u00fcles ja seej\u00e4rel suurust muudame.<\/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
\u00dclaltoodud koodis talletan pilti 3 formaadis: v\u00e4ike, keskmine ja suur. P\u00e4rast nende salvestamist kutsume meetodi createThumbnail<\/code>ja edastame meetodile vajaliku laiuse, k\u00f5rguse. M\u00e4\u00e4ratleme selle funktsiooni allpool. See funktsioon peaks minema samasse kontrollerisse.<\/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
Siin muudame pildi suurust proportsionaalselt. Nii toimides s\u00e4ilitame kuvasuhte ja pilti ei l\u00f5igata.<\/p>\n
Kui otsite k\u00f5va saaki, asendage read allpool<\/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
Koos<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Loodetavasti saate aru, kuidas luua sekkumispildi teeki abil pisipilt Laravelis. Tahaksin kuulda teie m\u00f5tteid allpool olevast kommentaaride jaotisest.<\/p>\n
seotud artiklid<\/h4>\n