{"id":28761,"date":"2021-05-31T15:50:00","date_gmt":"2021-05-31T12:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28761"},"modified":"2021-10-18T03:38:22","modified_gmt":"2021-10-18T00:38:22","slug":"jak-przesylac-i-kompresowac-obrazy-w-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-przesylac-i-kompresowac-obrazy-w-laravel\/","title":{"rendered":"Jak przesy\u0142a\u0107 i kompresowa\u0107 obrazy w Laravel?"},"content":{"rendered":"

Szukasz sposobu na przesy\u0142anie i kompresowanie obraz\u00f3w w Laravel? Laravel zapewnia \u0142atwy spos\u00f3b przesy\u0142ania plik\u00f3w. Dobr\u0105 praktyk\u0105 jest kompresowanie obraz\u00f3w podczas przesy\u0142ania. W tym artykule poka\u017c\u0119, jak wgrywa\u0107 i kompresowa\u0107 obrazy w Laravelu.<\/p>\n

Dlaczego trzeba kompresowa\u0107 obrazy?<\/h3>\n

Obrazy odgrywaj\u0105 wa\u017cn\u0105 rol\u0119 w Twojej witrynie. Obrazy poprawiaj\u0105 UX i przyci\u0105gaj\u0105 wzrok odwiedzaj\u0105cych. Ale jednocze\u015bnie mo\u017ce to r\u00f3wnie\u017c zabi\u0107 wydajno\u015b\u0107 witryny. Ci\u0119\u017ckie obrazy spowalniaj\u0105 witryn\u0119. W rezultacie \u0142adowanie witryny trwa bardzo d\u0142ugo. U\u017cytkownicy nie lubi\u0105 wolnych stron internetowych. Je\u015bli Twoja witryna \u0142aduje si\u0119 d\u0142u\u017cej, istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce stracisz swoich odbiorc\u00f3w. Standardowy czas \u0142adowania strony internetowej to 2 sekundy. Nale\u017cy zadba\u0107 o to, aby witryna \u0142adowa\u0142a si\u0119 w ci\u0105gu 2 sekund.<\/p>\n

Chocia\u017c istnieje kilka czynnik\u00f3w, kt\u00f3re nale\u017cy wzi\u0105\u0107 pod uwag\u0119, aby poprawi\u0107 szybko\u015b\u0107 strony, jednym z nich jest u\u017cycie zoptymalizowanych obraz\u00f3w. Kompresowanie obraz\u00f3w zmniejsza rozmiar oryginalnego obrazu bez utraty jego jako\u015bci. Pomaga zwi\u0119kszy\u0107 szybko\u015b\u0107 witryny.<\/p>\n

Powiedziawszy to, zobaczmy, jak przesy\u0142a\u0107 i kompresowa\u0107 obrazy w Laravelu.<\/p>\n

Przesy\u0142anie obraz\u00f3w w Laravel<\/h3>\n

Laravel zapewnia czysty spos\u00f3b przesy\u0142ania obraz\u00f3w. Na pocz\u0105tek musimy najpierw stworzy\u0107 katalog, w kt\u00f3rym b\u0119dziemy przechowywa\u0107 obrazy. Otw\u00f3rz wiersz polecenia w katalogu g\u0142\u00f3wnym i uruchom poni\u017csze polecenie.<\/p>\n

php artisan storage:link<\/code><\/pre>\n
To polecenie tworzy katalog \u201estorage" w folderze \u201epublic”.<\/p>\n
Nast\u0119pnie utw\u00f3rz formularz z danymi wej\u015bciowymi pliku i prze\u015blij przycisk, dodaj\u0105c poni\u017cszy kod do pliku ostrza.<\/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
W powy\u017cszym kodzie HTML doda\u0142em plik wej\u015bciowy o nazwie \u201eprofile_image”. Doda\u0142em r\u00f3wnie\u017c {{ csrf_field() }}<\/code>co jest wymagane do przesy\u0142ania formularzy Laravel.<\/p>\n
Teraz, zak\u0142adaj\u0105c, \u017ce wysy\u0142asz \u017c\u0105danie post do store()<\/code>metody twojego kontrolera, napisz kod, kt\u00f3ry przechowuje obraz na serwerze, jak poni\u017cej.<\/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
Ten kod tworzy unikaln\u0105 nazw\u0119 pliku i przechowuje plik w katalogu \u201eprofile_images”. Laravel automatycznie generuje katalog 'profile_images’ pod 'public\/storage’, je\u015bli nie istnieje.<\/p>\n
Jak wspomniano wcze\u015bniej, lepsz\u0105 praktyk\u0105 jest optymalizacja obrazu w momencie przesy\u0142ania. Sko\u0144czyli\u015bmy z kodem wgrania obrazu. Teraz musimy to skompresowa\u0107. Zamierzam om\u00f3wi\u0107<\/a> 2 us\u0142ugi \u2013 TinyPNG<\/a> i reSmush.it,<\/a> kt\u00f3re zapewniaj\u0105 interfejsy API do kompresji obraz\u00f3w w locie. Zobaczmy je jeden po drugim.<\/p>\n
Kompresuj obrazy za pomoc\u0105 TinyPNG w Laravel<\/h3>\n
Aby skompresowa\u0107 obrazy za pomoc\u0105 TinyPNG API, musisz uzyska\u0107 klucz API<\/a>. Proces jest prosty. Zarejestruj u nich sw\u00f3j adres e-mail, a oni wy\u015bl\u0105 Tw\u00f3j klucz programisty.<\/p>\n
Gdy otrzymasz klucz API, dodaj go do .env<\/code>pliku.<\/p>\n
Nast\u0119pnie zainstaluj pakiet TinyPNG za pomoc\u0105 polecenia:<\/p>\n
composer require tinify\/tinify<\/code><\/pre>\n
Po instalacji pakietu musimy napisa\u0107 kod, kt\u00f3ry skompresuje przes\u0142any obraz za pomoc\u0105 TinyPNG.<\/p>\n
Napisz kod kompresji tu\u017c pod lini\u0105, kt\u00f3ra przesy\u0142a obraz.<\/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
Powy\u017cszy kod pobiera obraz z przes\u0142anego katalogu, wysy\u0142a go na serwer TinyPNG w celu kompresji, a po otrzymaniu odpowiedzi przechowuje skompresowany obraz w tym samym katalogu.<\/p>\n
Ten proces dzia\u0142a w tle. Nie musisz martwi\u0107 si\u0119 o to, jak obraz trafi na serwer TinyPNG, jak otrzyma odpowied\u017a API. Biblioteka TinyPNG wykona wszystkie zadania za Ciebie.<\/p>\n
Spr\u00f3buj przes\u0142a\u0107 obraz teraz, a powiniene\u015b zobaczy\u0107, jak obraz jest skompresowany.<\/p>\n
Kompresuj obrazy za pomoc\u0105 reSmush.it w Laravel<\/h3>\n
TinyPNG dzia\u0142a dobrze, ale ma ograniczenie optymalizacji 500 darmowych obraz\u00f3w miesi\u0119cznie. Je\u015bli chcesz skompresowa\u0107 wi\u0119cej ni\u017c 500 zdj\u0119\u0107, musisz za nie zap\u0142aci\u0107. Alternatywnie u\u017cytkownicy mog\u0105 wybra\u0107 bezp\u0142atn\u0105 us\u0142ug\u0119 reSmush.it do kompresji obrazu. W chwili pisania tego artyku\u0142u reSmush.it kompresuje ponad 7 miliard\u00f3w obraz\u00f3w. Tyle mo\u017cna powiedzie\u0107 o popularno\u015bci tej us\u0142ugi.<\/p>\n
Napisz wi\u0119c poni\u017cszy kod, kt\u00f3ry kompresuje obrazy za pomoc\u0105 reSmush.it w Laravel.<\/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
Przekaza\u0142em warto\u015b\u0107 jako\u015bci 80 ?qlty=80<\/code>w powy\u017cszym kodzie. Mo\u017cesz bawi\u0107 si\u0119 przekazywaniem r\u00f3\u017cnych warto\u015bci jako\u015bciowych.<\/p>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak przesy\u0142a\u0107 i kompresowa\u0107 obrazy w Laravel. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n