{"id":24631,"date":"2021-05-22T11:07:00","date_gmt":"2021-05-22T08:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24631"},"modified":"2021-10-18T02:40:10","modified_gmt":"2021-10-17T23:40:10","slug":"bildgrose-in-laravel-mithilfe-der-interventions-bildbibliothek-andern","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/bildgrose-in-laravel-mithilfe-der-interventions-bildbibliothek-andern\/","title":{"rendered":"Bildgr\u00f6\u00dfe in Laravel mithilfe der Interventions-Bildbibliothek \u00e4ndern"},"content":{"rendered":"

K\u00fcrzlich hat einer unserer Leser gefragt, wie man die Gr\u00f6\u00dfe des Bildes in Laravel \u00e4ndert. Die Gr\u00f6\u00dfen\u00e4nderung von Bildern ist eine regelm\u00e4\u00dfige Aufgabe f\u00fcr Entwickler. Die Entwickler sollten es richtig machen. Es empfiehlt sich, die Gr\u00f6\u00dfe der Bilder entsprechend ihrer Containergr\u00f6\u00dfe zu \u00e4ndern. Es hilft Ihnen, die Seitengeschwindigkeit zu verbessern. In diesem Artikel untersuchen wir, wie Sie die Gr\u00f6\u00dfe des Bildes in Laravel mithilfe der Interventionsbildbibliothek \u00e4ndern.<\/p>\n

Die Interventions-Bildbibliothek<\/a> bietet eine einfache M\u00f6glichkeit, die Gr\u00f6\u00dfe der Bilder zu \u00e4ndern. Diese Bibliothek verwendet GD Library und Imagick f\u00fcr die Bildbearbeitung unter der Haube.<\/p>\n

Warum sollte die Gr\u00f6\u00dfe von Bildern ge\u00e4ndert werden?<\/h3>\n

Nehmen Sie das Beispiel einer Galerie. W\u00e4hrend der Arbeit an einer Galerie zeigen wir normalerweise das kleine Thumbnail im Listing an. Wenn jemand auf das Thumbnail klickt, zeigen wir ein Originalbild. Hier sind die Miniaturansichten die verkleinerte Version des Originalbilds.<\/p>\n

Nehmen wir an, Ihre Originalbildgr\u00f6\u00dfe betr\u00e4gt 500\u00a0500 und Ihr Miniaturansichtscontainer hat die Gr\u00f6\u00dfe 200200. In diesem Fall sollten Sie die Gr\u00f6\u00dfe des Originalbilds entsprechend der Containergr\u00f6\u00dfe der Miniaturansicht \u00e4ndern. Die Verwendung eines gro\u00dfen Bildes in einem kleinen Container ist eine schlechte Praxis. Es beeinflusst die Leistung der Website.<\/p>\n

Dies ist ein Beispiel daf\u00fcr, warum wir die Gr\u00f6\u00dfe der Bilder \u00e4ndern sollten. Es gibt auch viele andere. Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie die Gr\u00f6\u00dfe des Bildes in Laravel mithilfe der Interventionsbildbibliothek \u00e4ndern.<\/p>\n

Installation<\/h3>\n

Um zu beginnen, m\u00fcssen Sie die Intervention Image-Bibliothek in Ihrem Laravel-Projekt installieren. Sie sollten Composer<\/a> auf dem System installiert. \u00d6ffnen Sie das Terminal in Ihrem Projekt-Stammverzeichnis und f\u00fchren Sie den folgenden Befehl aus:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
\u00d6ffnen Sie nach der Installation der Bibliothek die config\/app.php<\/code>Datei und f\u00fcgen Sie die folgenden Zeilen hinzu.<\/p>\n
F\u00fcgen Sie dem $providers<\/code>Array den Dienstanbieter dieses Pakets hinzu .<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Als n\u00e4chstes f\u00fcgen Sie die Fassade zum $aliases<\/code>Array hinzu.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Bildgr\u00f6\u00dfe in Laravel \u00e4ndern<\/h3>\n
Um die Gr\u00f6\u00dfe des Bildes zu \u00e4ndern, m\u00fcssen wir zuerst Code zum Hochladen eines Bildes schreiben. Erstellen Sie also zuerst ein Verzeichnis, in dem wir die Bilder speichern. Gehen Sie zum Terminal und f\u00fchren Sie den Befehl aus:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Dieser Befehl erstellt ein ’storage‘-Verzeichnis unter dem ‚public‘-Ordner. Im Ordner ’storage‘ speichern wir eine Vollversion und eine Miniaturansicht der Bilder.<\/p>\n
Erstellen Sie als N\u00e4chstes ein Formular in Ihrer Ansichtsdatei. Ich f\u00fcge auch Code f\u00fcr die Erfolgsmeldung in der Blade-Datei hinzu.<\/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
Ersetzen Sie den Platzhalter ‚PASS_ACTION_URL‘ durch Ihre Route.<\/p>\n
In der Steuerung ist es erforderlich, das Fassaden-‚Image‘ einer Bibliothek hinzuzuf\u00fcgen, die wir in der config\/app.php<\/code>Datei hinzugef\u00fcgt haben .<\/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
Durch das Hinzuf\u00fcgen der Fassade k\u00f6nnen wir Funktionen der Intervention Image Library aufrufen. Im folgenden Code werde ich das Bild an zwei Stellen hochladen. Eines ist das Originalbild im Ordner \u201eprofile_images“. Der zweite befindet sich im Verzeichnis ‚profile_images\/thumbnail‘. Ich werde zuerst das Originalbild in den Thumbnail-Ordner hochladen und dann die Gr\u00f6\u00dfe \u00e4ndern.<\/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
Hier verkleinere ich das Bild proportional. Dabei behalten Sie das Seitenverh\u00e4ltnis bei und das Bild wird nicht abgeschnitten. Ich habe Breite als 400 und H\u00f6he als 150 \u00fcbergeben. Sie k\u00f6nnen diese Werte nach Ihren W\u00fcnschen \u00e4ndern.<\/p>\n
Wenn Sie nach hartem Zuschneiden suchen, ersetzen Sie die folgenden Zeilen<\/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
Mit<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
Danach erhalten Sie das Thumbnail mit einer Dimension von 100*100.<\/p>\n
Ich hoffe, Sie erfahren mehr \u00fcber die Gr\u00f6\u00dfen\u00e4nderung des Bildes in Laravel mithilfe der Interventionsbildbibliothek. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n