{"id":28228,"date":"2021-05-22T10:40:00","date_gmt":"2021-05-22T07:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28228"},"modified":"2021-10-18T03:43:05","modified_gmt":"2021-10-18T00:43:05","slug":"zmien-rozmiar-obrazu-w-laravel-za-pomoca-biblioteki-obrazow-interwencyjnych","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/zmien-rozmiar-obrazu-w-laravel-za-pomoca-biblioteki-obrazow-interwencyjnych\/","title":{"rendered":"Zmie\u0144 rozmiar obrazu w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych"},"content":{"rendered":"

Ostatnio jeden z naszych czytelnik\u00f3w zapyta\u0142, jak zmieni\u0107 rozmiar obrazu w Laravelu. Zmiana rozmiaru obrazu to regularne zadanie dla programist\u00f3w. Deweloperzy powinni to zrobi\u0107 poprawnie. Dobr\u0105 praktyk\u0105 jest zmiana rozmiaru obraz\u00f3w zgodnie z rozmiarem kontenera. Pomaga poprawi\u0107 szybko\u015b\u0107 strony. W tym artykule dowiemy si\u0119, jak zmieni\u0107 rozmiar obrazu w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych.<\/p>\n

Interwencja<\/a> Biblioteka obraz\u00f3w<\/a> zapewnia \u0142atwy spos\u00f3b zmiany rozmiaru obraz\u00f3w. Ta biblioteka wykorzystuje GD Library i Imagick do manipulacji obrazami pod mask\u0105.<\/p>\n

Dlaczego nale\u017cy zmienia\u0107 rozmiar obraz\u00f3w?<\/h3>\n

We\u017amy na przyk\u0142ad galeri\u0119. Podczas pracy nad galeri\u0105 zwykle wy\u015bwietlamy ma\u0142\u0105 miniatur\u0119 na li\u015bcie. Gdy kto\u015b kliknie miniatur\u0119, poka\u017cemy oryginalny obraz. Tutaj miniatury s\u0105 zmienion\u0105 wersj\u0105 oryginalnego obrazu.<\/p>\n

Za\u0142\u00f3\u017cmy, \u017ce rozmiar oryginalnego obrazu to 500 500, a rozmiar kontenera miniatur to 200 200. W takim przypadku nale\u017cy zmieni\u0107 rozmiar oryginalnego obrazu zgodnie z rozmiarem kontenera miniatury. U\u017cywanie obrazu o du\u017cym rozmiarze w ma\u0142ym pojemniku to z\u0142a praktyka. Wp\u0142ywa na wydajno\u015b\u0107 strony.<\/p>\n

To jeden z przyk\u0142ad\u00f3w, dlaczego powinni\u015bmy zmieni\u0107 rozmiar obraz\u00f3w. Jest te\u017c wiele innych. Powiedziawszy to, przyjrzyjmy si\u0119, jak zmieni\u0107 rozmiar obrazu w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych.<\/p>\n

Instalacja<\/h3>\n

Aby rozpocz\u0105\u0107, musisz zainstalowa\u0107 bibliotek\u0119 Intervention Image w swoim projekcie Laravel. Powiniene\u015b mie\u0107 zainstalowany Composer<\/a> w swoim systemie. Otw\u00f3rz terminal w katalogu g\u0142\u00f3wnym projektu i uruchom poni\u017csze polecenie:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Po zainstalowaniu biblioteki otw\u00f3rz config\/app.php<\/code>plik i dodaj do niego nast\u0119puj\u0105ce wiersze.<\/p>\n
Dodaj dostawc\u0119 us\u0142ug tego pakietu do $providers<\/code>tablicy.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Nast\u0119pnie dodaj fasad\u0119 do $aliases<\/code>tablicy.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Zmie\u0144 rozmiar obrazu w Laravel<\/h3>\n
Aby zmieni\u0107 rozmiar obrazu, musimy najpierw napisa\u0107 kod do za\u0142adowania obrazu. Wi\u0119c najpierw utw\u00f3rz katalog, w kt\u00f3rym b\u0119dziemy przechowywa\u0107 obrazy. Udaj si\u0119 do terminala i uruchom polecenie:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
To polecenie tworzy katalog \u201estorage" w folderze \u201epublic”. W folderze \u201estorage” b\u0119dziemy przechowywa\u0107 pe\u0142n\u0105 i miniaturow\u0105 wersj\u0119 obraz\u00f3w.<\/p>\n
Nast\u0119pnie utw\u00f3rz formularz w pliku widoku. Dodaj\u0119 r\u00f3wnie\u017c kod do wiadomo\u015bci o sukcesie w pliku ostrza.<\/p>\n
@if (session('success'))\n\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ session('success') }}\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endif\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
Zast\u0105p symbol zast\u0119pczy \u201ePASS_ACTION_URL” swoj\u0105 tras\u0105.<\/p>\n
W kontrolerze nale\u017cy doda\u0107 fasad\u0119 'Image’ biblioteki, kt\u00f3r\u0105 dodali\u015bmy w config\/app.php<\/code>pliku.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\n}<\/code><\/pre>\n
Dodaj\u0105c fasad\u0119 jeste\u015bmy w stanie wywo\u0142a\u0107 funkcje biblioteki obraz\u00f3w interwencyjnych. W poni\u017cszym kodzie wrzuc\u0119 obrazek w dw\u00f3ch miejscach. Jednym z nich jest oryginalny obraz w folderze \u201eprofile_images”. Drugi znajduje si\u0119 w katalogu 'profile_images\/thumbnail’. Najpierw prze\u015bl\u0119 oryginalny obraz do folderu miniatur, a nast\u0119pnie zmieni\u0119 jego rozmiar.<\/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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($thumbnailpath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\"); \/\/change the route as per your flow\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Tutaj zmieniam rozmiar obrazu proporcjonalnie. W ten spos\u00f3b zachowasz proporcje, a obraz nie zostanie obci\u0119ty. Przekaza\u0142em szeroko\u015b\u0107 jako 400 i wysoko\u015b\u0107 jako 150. Mo\u017cesz zmieni\u0107 te warto\u015bci zgodnie z wymaganiami.<\/p>\n
Je\u015bli szukasz mocnego przycinania, zast\u0105p poni\u017csze linie<\/p>\n
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($thumbnailpath);<\/code><\/pre>\n
Z<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
Nast\u0119pnie otrzymasz miniatur\u0119 o wymiarze 100*100.<\/p>\n
Mam nadziej\u0119, \u017ce mo\u017cesz dowiedzie\u0107 si\u0119 o zmianie rozmiaru obrazu w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n