{"id":28390,"date":"2021-05-25T11:02:00","date_gmt":"2021-05-25T08:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28390"},"modified":"2021-10-18T03:42:14","modified_gmt":"2021-10-18T00:42:14","slug":"utworz-miniature-w-laravel-za-pomoca-biblioteki-obrazow-interwencyjnych","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/utworz-miniature-w-laravel-za-pomoca-biblioteki-obrazow-interwencyjnych\/","title":{"rendered":"Utw\u00f3rz miniatur\u0119 w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych"},"content":{"rendered":"

Na stronie zawsze zajmujemy si\u0119 obrazami. W zale\u017cno\u015bci od wymaga\u0144 u\u017cywamy r\u00f3\u017cnych wersji obraz\u00f3w. Dobr\u0105 praktyk\u0105 dla programist\u00f3w jest tworzenie r\u00f3\u017cnych wersji, czyli miniaturek pojedynczego obrazu. Te miniatury mog\u0105 by\u0107 u\u017cywane podczas wy\u015bwietlania obraz\u00f3w o r\u00f3\u017cnych rozmiarach w zale\u017cno\u015bci od rozmiaru kontenera. Wy\u015bwietlanie obrazu dopasowanego do rozmiaru kontenera oszcz\u0119dzi przepustowo\u015b\u0107 i skr\u00f3ci czas \u0142adowania strony. Wy\u015bwietlanie obrazu o du\u017cym rozmiarze w ma\u0142ym kontenerze to z\u0142a praktyka i skraca czas wczytywania strony. W rezultacie zaleca si\u0119 tworzenie wielu miniatur obrazu i u\u017cywanie odpowiedniej wersji tam, gdzie jest to konieczne.<\/p>\n

W tym artykule dowiemy si\u0119, jak utworzy\u0107 miniatur\u0119 w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych. Intervention Image<\/a> jest darmow\u0105 i jedn\u0105 z popularnych bibliotek do manipulacji obrazami. W tle ta biblioteka u\u017cywa Biblioteki GD i Imagick do manipulacji obrazami.<\/p>\n

W tym samouczku stworz\u0119 3 miniatury \u2013 ma\u0142\u0105, \u015bredni\u0105, du\u017c\u0105 o rozmiarach odpowiednio 150 93, 300*185, 550 340. Zmie\u0144 te rozmiary zgodnie z wymaganiami.<\/p>\n

Pierwsze kroki<\/h3>\n

Aby rozpocz\u0105\u0107, musisz najpierw zainstalowa\u0107 bibliotek\u0119 Intervention Image w Laravel. 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\u00f3w us\u0142ug dla tego pakietu w $providers<\/code>tablicy.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Dodaj fasad\u0119 do $aliases<\/code>szyku.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Nast\u0119pnie, aby przechowywa\u0107 obrazy, musimy utworzy\u0107 katalog. Udaj si\u0119 do terminala i uruchom polecenie w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
To polecenie tworzy katalog przechowywania (dowi\u0105zanie symboliczne) w folderze publicznym. W tym folderze prze\u015bl\u0119 oryginalny obraz i jego miniatury.<\/p>\n
Utw\u00f3rz miniatur\u0119 w Laravel<\/h3>\n
Wszyscy ustawili\u015bmy podstawow\u0105 konfiguracj\u0119 i mo\u017cemy teraz napisa\u0107 rzeczywisty kod. Utw\u00f3rzmy formularz w pliku widoku.<\/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
W kontrolerze nale\u017cy doda\u0107 fasad\u0119 biblioteki 'Image’ kt\u00f3r\u0105 dodali\u015bmy w config\/app.php<\/code>pliku.<\/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
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. Oryginalny obraz trafia bezpo\u015brednio do storage\/profile_images<\/code>folderu. Miniatury b\u0119d\u0105 przechowywane w storage\/profile_images\/thumbnail<\/code>katalogu. Najpierw przesy\u0142amy oryginalny obraz do folderu miniatur, a nast\u0119pnie zmieniamy 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\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
W powy\u017cszym kodzie przechowuj\u0119 obraz w 3 formatach ma\u0142y, \u015bredni i du\u017cy. Po ich zapisaniu wywo\u0142ujemy metod\u0119 createThumbnail<\/code>i przekazujemy do metody wymagan\u0105 szeroko\u015b\u0107, wysoko\u015b\u0107. Zdefiniujmy t\u0119 funkcj\u0119 poni\u017cej. Ta funkcja powinna przej\u015b\u0107 do tego samego kontrolera.<\/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
Tutaj proporcjonalnie zmieniamy rozmiar obrazu. W ten spos\u00f3b zachowujemy proporcje, a obraz nie zostanie obci\u0119ty.<\/p>\n
Je\u015bli szukasz twardej uprawy, zamie\u0144 poni\u017csze linie<\/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
Z<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak stworzy\u0107 miniatur\u0119 w Laravel za pomoc\u0105 biblioteki obraz\u00f3w interwencyjnych. Chcia\u0142bym us\u0142ysze\u0107 twoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n