{"id":25088,"date":"2021-05-31T15:08:00","date_gmt":"2021-05-31T12:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25088"},"modified":"2021-10-17T20:30:52","modified_gmt":"2021-10-17T17:30:52","slug":"kuinka-ladata-ja-pakata-kuvia-laravelissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-ja-pakata-kuvia-laravelissa\/","title":{"rendered":"Kuinka ladata ja pakata kuvia Laravelissa"},"content":{"rendered":"

Etsitk\u00f6 kuinka ladata ja pakata kuvia Laraveliin? Laravel tarjoaa helpon tavan tiedostojen lataamiseen. Ja kuvien pakkaaminen lataushetkell\u00e4 on hyv\u00e4 k\u00e4yt\u00e4nt\u00f6. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, kuinka kuvia voidaan ladata ja pakata Laravelissa.<\/p>\n

Miksi kuvia on pakattava?<\/h3>\n

Kuvilla on t\u00e4rke\u00e4 rooli verkkosivustollasi. Kuvat lis\u00e4\u00e4v\u00e4t UX: n ja katseenvangitsijakokemusta vierailijoille. Mutta samalla se voi my\u00f6s tappaa sivuston suorituskyvyn. Raskaat kuvat hidastavat sivustoa. T\u00e4m\u00e4n seurauksena sivustosi lataaminen kest\u00e4\u00e4 kauan. K\u00e4ytt\u00e4j\u00e4t eiv\u00e4t pid\u00e4 hitaista verkkosivustoista. Jos sivustosi lataaminen vie enemm\u00e4n aikaa, menet\u00e4t yleis\u00f6si suurella todenn\u00e4k\u00f6isyydell\u00e4. Sivuston tavallinen latausaika on 2 sekuntia. Varmista, ett\u00e4 sivustosi latautuu 2 sekunnin kuluessa.<\/p>\n

Vaikka on olemassa useita tekij\u00f6it\u00e4, jotka on otettava huomioon sivun nopeuden parantamiseksi, yksi niist\u00e4 on optimoitujen kuvien k\u00e4ytt\u00f6. Kuvien pakkaaminen pienent\u00e4\u00e4 alkuper\u00e4isen kuvan kokoa menett\u00e4m\u00e4tt\u00e4 sen laatua. Se auttaa lis\u00e4\u00e4m\u00e4\u00e4n sivuston nopeutta.<\/p>\n

T\u00e4m\u00e4n sanotaan, katsotaanpa, kuinka kuvia ladataan ja pakataan Laravelissa.<\/p>\n

Kuvien lataaminen Laraveliin<\/h3>\n

Laravel tarjoaa puhtaan tavan ladata kuvia. Aloittamiseksi meid\u00e4n on ensin luotava hakemisto, johon tallennamme kuvat. Avaa komentokehote juurihakemistosta ja suorita alla oleva komento.<\/p>\n

php artisan storage:link<\/code><\/pre>\n
T\u00e4m\u00e4 komento luo ’storage’ -hakemiston ’public’ -kansioon.<\/p>\n
Luo seuraavaksi lomake tiedostosy\u00f6t\u00f6ll\u00e4 ja l\u00e4het\u00e4-painikkeella lis\u00e4\u00e4m\u00e4ll\u00e4 alla oleva koodi blade-tiedostoon.<\/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
Yll\u00e4 olevaan HTML-koodiin olen lis\u00e4nnyt tiedostosy\u00f6tteen nimell\u00e4 ’profile_image’. Olen my\u00f6s lis\u00e4nnyt, {{ csrf_field() }}<\/code>mik\u00e4 vaaditaan Laravel-lomakkeiden l\u00e4hett\u00e4miseen.<\/p>\n
Oletetaan, ett\u00e4 l\u00e4het\u00e4t postituspyynn\u00f6n ohjaimen store()<\/code>menetelm\u00e4lle, kirjoita koodi, joka tallentaa kuvan palvelimelle alla olevan mukaisesti.<\/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
T\u00e4m\u00e4 koodi luo yksil\u00f6llisen tiedostonimen ja tallentaa tiedoston hakemistoon ’profile_images’. Laravel luo automaattisesti ’profile_images’ -hakemiston kohtaan ’public \/ storage’, jos sit\u00e4 ei ole.<\/p>\n
Kuten aiemmin todettiin, on parempi tapa optimoida kuva lataushetkell\u00e4. Olemme ladanneet kuvan latauskoodin. Nyt meid\u00e4n on pakattava se. Aion kattaa 2 palvelua – TinyPNG: n<\/a> ja reSmush.it: n,<\/a> joka tarjoaa API: t pakkaamaan kuvia lennossa. Katsotaanpa ne yksi kerrallaan.<\/p>\n
Pakkaa kuvat TinyPNG: ll\u00e4 Laravelissa<\/h3>\n
Kuvien pakkaamiseksi TinyPNG-sovellusliittym\u00e4n avulla sinun on hankittava API-avain<\/a>. Prosessi on suora eteenp\u00e4in. Rekister\u00f6i s\u00e4hk\u00f6postiosoitteesi heille, niin he l\u00e4hett\u00e4v\u00e4t kehitt\u00e4j\u00e4avaimesi.<\/p>\n
Kun olet saanut API-avaimen, lis\u00e4\u00e4 se .env<\/code>tiedostoon.<\/p>\n
Asenna t\u00e4m\u00e4n j\u00e4lkeen TinyPNG-paketti komennolla:<\/p>\n
composer require tinify\/tinify<\/code><\/pre>\n
Paketin asennuksen yhteydess\u00e4 meid\u00e4n on kirjoitettava koodi, joka pakkaa ladatun kuvan TinyPNG: n avulla.<\/p>\n
Kirjoita pakkauskoodi heti kuvan lataavan rivin alle.<\/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
Yll\u00e4 oleva koodi ottaa kuvan ladatusta hakemistosta, l\u00e4hett\u00e4\u00e4 sen TinyPNG-palvelimelle pakkaamista varten ja saatuaan vastauksen tallentaa pakatun kuvan samaan hakemistoon.<\/p>\n
T\u00e4m\u00e4 prosessi kulkee taustalla. Sinun ei tarvitse huolehtia siit\u00e4, miten kuva menee TinyPNG-palvelimelle, miten se saa API-vastauksen. TinyPNG-kirjasto tekee kaikki teht\u00e4v\u00e4t puolestasi.<\/p>\n
Yrit\u00e4 ladata kuva nyt, ja sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 kuva pakataan.<\/p>\n
Pakkaa kuvat k\u00e4ytt\u00e4m\u00e4ll\u00e4 reSmush.it-tiedostoa Laravelissa<\/h3>\n
TinyPNG toimii hyvin, mutta sill\u00e4 on rajoitettu optimoimaan 500 ilmaista kuvaa kuukaudessa. Jos haluat pakata yli 500 kuvaa, sinun on maksettava niist\u00e4. Vaihtoehtoisesti k\u00e4ytt\u00e4j\u00e4t voivat valita ilmaisen reSmush.it-palvelun kuvan pakkaamiseksi. T\u00e4m\u00e4n artikkelin kirjoittamisen aikana reSmush.it pakkaa yli 7 miljardia kuvaa. T\u00e4m\u00e4 riitt\u00e4\u00e4 sanomaan t\u00e4m\u00e4n palvelun suosiosta.<\/p>\n
Kirjoita siis koodi, joka pakkaa kuvat k\u00e4ytt\u00e4m\u00e4ll\u00e4 reSmush.it-tiedostoa Laravelissa.<\/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 l\u00e4p\u00e4issyt laatuarvoksi 80 ?qlty=80<\/code>edellisess\u00e4 koodissa. Voit pelata l\u00e4p\u00e4isem\u00e4ll\u00e4 eri laatuarvot.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka ladata ja pakata kuvia Laraveliin. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n