{"id":25538,"date":"2021-05-31T15:47:00","date_gmt":"2021-05-31T12:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25538"},"modified":"2021-10-17T18:33:54","modified_gmt":"2021-10-17T15:33:54","slug":"kuidas-pilte-laravelis-ules-laadida-ja-tihendada","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-pilte-laravelis-ules-laadida-ja-tihendada\/","title":{"rendered":"Kuidas pilte Laravelis \u00fcles laadida ja tihendada"},"content":{"rendered":"

Kas otsite, kuidas pilte Laravelis \u00fcles laadida ja kokku pakkida? Laravel pakub failide \u00fcleslaadimiseks lihtsat viisi. Ja piltide kokkusurumine \u00fcleslaadimise ajal on hea tava. Selles artiklis n\u00e4itan teile, kuidas pilte Laravelis \u00fcles laadida ja kokku pakkida.<\/p>\n

Miks on vaja pilte tihendada?<\/h3>\n

Piltidel on teie veebisaidil oluline roll. Kujutised lisavad k\u00fclastajatele paremat UX-i ja pilkup\u00fc\u00fcdvat kogemust. Kuid samal ajal v\u00f5ib see tappa ka saidi j\u00f5udluse. Rasked pildid aeglustavad saiti. Seet\u00f5ttu v\u00f5tab teie saidi laadimine kaua aega. Kasutajatele ei meeldi aeglased veebisaidid. Kui teie saidi laadimine v\u00f5tab rohkem aega, on teil suur t\u00f5en\u00e4osus, et kaotate oma vaatajaskonna. Veebisaidi tavap\u00e4rane laadimisaeg on 2 sekundit. Peaksite hoolitsema selle eest, et teie saiti laaditaks 2 sekundi jooksul.<\/p>\n

Kuigi lehekiiruse parandamiseks tuleb arvestada mitmete teguritega, on \u00fcks neist optimeeritud piltide kasutamine. Piltide tihendamine v\u00e4hendab teie originaalpildi suurust kaotamata selle kvaliteeti. See aitab suurendada saidi kiirust.<\/p>\n

Seda \u00f6eldes vaatame, kuidas pilte Laravelis \u00fcles laadida ja tihendada.<\/p>\n

Piltide \u00fcleslaadimine Laravelis<\/h3>\n

Laravel pakub puhast viisi piltide \u00fcleslaadimiseks. Selle alustamiseks peame k\u00f5igepealt looma kataloogi, kuhu pildid salvestame. Avage juurkataloogis oma k\u00e4suviip ja k\u00e4ivitage j\u00e4rgmine k\u00e4sk.<\/p>\n

php artisan storage:link<\/code><\/pre>\n
See k\u00e4sk loob kausta ‘public’ kataloogi ‘storage’.<\/p>\n
J\u00e4rgmisena looge vorm sisestatud faili sisestamise ja esitamise nupuga, lisades oma labafaili alloleva koodi.<\/p>\n
<form action=\"{{ url('ROUTE_HERE') }}\" 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
\u00dclalolevas HTML-is olen lisanud failisisendi nimega ‘profile_image’. Olen lisanud ka selle, {{ csrf_field() }}<\/code>mis on vajalik Laraveli vormide esitamiseks.<\/p>\n
Eeldades, et saadate postitustaotluse oma kontrolleri store()<\/code>meetodile, kirjutage kood, mis salvestab pildi serverisse, nagu allpool.<\/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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Compress Image Code Here\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
See kood loob kordumatu failinime ja salvestab faili kataloogi ‘profile_images’. Kui seda pole olemas, genereerib Laravel kataloogi ‘profile_images’ automaatselt, kui seda pole.<\/p>\n
Nagu varem \u00f6eldud, on parem \u00fcleslaadimise ajal pildi optimeerimine. Oleme pildi \u00fcleslaadimise koodiga valmis. N\u00fc\u00fcd peame selle kokku suruma. Ma k\u00e4sitlen<\/a> kahte teenust – TinyPNG<\/a> ja reSmush.it,<\/a> mis pakub API-sid piltide tihendamiseks lennult. Vaatame neid \u00fckshaaval.<\/p>\n
Piltide tihendamine, kasutades Laraveli rakendust TinyPNG<\/h3>\n
Piltide tihendamiseks TinyPNG API abil peate hankima oma API v\u00f5tme<\/a>. Protsess on sirgjooneline. Registreerige oma e-posti aadress nende juures ja nad saadavad teie arendaja v\u00f5tme.<\/p>\n
Kui olete API v\u00f5tme k\u00e4tte saanud, lisage see .env<\/code>faili.<\/p>\n
P\u00e4rast seda installige TinyPNG pakett k\u00e4suga:<\/p>\n
composer require tinify\/tinify<\/code><\/pre>\n
Paketi installimisel peame kirjutama koodi, mis tihendab \u00fcleslaaditud pilti TinyPNG abil.<\/p>\n
Kirjutage tihenduskood vahetult pildi \u00fcleslaadiva joone alla.<\/p>\n
\/\/Compress Image Code Here\n$filepath = public_path('storage\/profile_images\/'.$filenametostore);\n\u00a0\ntry {\n\u00a0\u00a0\u00a0\u00a0TinifysetKey(env(\"TINIFY_API_KEY\"));\n\u00a0\u00a0\u00a0\u00a0$source = TinifyfromFile($filepath);\n\u00a0\u00a0\u00a0\u00a0$source->toFile($filepath);\n} catch(TinifyAccountException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Verify your API key and account limit.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyClientException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Check your source image and request options.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyServerException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Temporary issue with the Tinify API.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyConnectionException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ A network connection error occurred.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Something else went wrong, unrelated to the Tinify API.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n}<\/code><\/pre>\n
\u00dclaltoodud kood v\u00f5tab \u00fcleslaaditud kataloogist pildi, saadab selle tihendamiseks TinyPNG-serverisse ja salvestab p\u00e4rast vastuse saamist tihendatud pildi samasse kataloogi.<\/p>\n
See protsess kulgeb taustal. Te ei pea muretsema, kuidas pilt l\u00e4heb TinyPNG-serverisse, kuidas see saab API-vastuse. TinyPNG kogu teeb teie eest k\u00f5ik \u00fclesanded.<\/p>\n
Proovige pilt kohe \u00fcles laadida ja peaksite n\u00e4gema, et teie pilt tihendatakse.<\/p>\n
Piltide tihendamine Laraveli saidil reSmush.it<\/h3>\n
TinyPNG t\u00f6\u00f6tab h\u00e4sti, kuid sellel on piirang optimeerida 500 tasuta pilti kuus. Kui soovite tihendada rohkem kui 500 pilti, peate nende eest maksma. Teise v\u00f5imalusena saavad kasutajad pildi tihendamiseks valida reSmush.it tasuta teenuse. Selle artikli kirjutamise ajal tihendab reSmush.it enam kui 7 miljardit pilti. Sellest piisab, kui \u00f6elda selle teenuse populaarsuse kohta.<\/p>\n
Niisiis, kirjutage kood, mis tihendab pilte, kasutades Laraveli reSmush.it.<\/p>\n
\/\/Compress Image Code Here\n$filepath = public_path('storage\/profile_images\/'.$filenametostore);\n$mime = mime_content_type($filepath);\n$output = new CURLFile($filepath, $mime, $filenametostore);\n$data = [\"files\" => $output];\n\u00a0\n$ch = curl_init();\ncurl_setopt($ch, CURLOPT_URL, 'http:\/\/api.resmush.it\/?qlty=80');\ncurl_setopt($ch, CURLOPT_POST,1);\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);\ncurl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);\ncurl_setopt($ch, CURLOPT_POSTFIELDS, $data);\n$result = curl_exec($ch);\nif (curl_errno($ch)) {\n\u00a0\u00a0\u00a0\u00a0$result = curl_error($ch);\n}\ncurl_close ($ch);\n\u00a0\n$arr_result = json_decode($result);\n\u00a0\n\/\/ store the optimized version of the image\n$ch = curl_init($arr_result->dest);\n$fp = fopen($filepath, 'wb');\ncurl_setopt($ch, CURLOPT_FILE, $fp);\ncurl_setopt($ch, CURLOPT_HEADER, 0);\ncurl_exec($ch);\ncurl_close($ch);\nfclose($fp);<\/code><\/pre>\n
Olen ?qlty=80<\/code>\u00fclaltoodud koodis edastanud kvaliteediv\u00e4\u00e4rtuseks 80. Saab m\u00e4ngida erinevate kvaliteediv\u00e4\u00e4rtuste edastamisega.<\/p>\n
Loodan, et saate aru, kuidas pilte Laravelis \u00fcles laadida ja kokku pakkida. Tahaksin kuulda teie m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n