Bildgröße in Laravel mithilfe der Interventions-Bildbibliothek ändern
Kürzlich hat einer unserer Leser gefragt, wie man die Größe des Bildes in Laravel ändert. Die Größenänderung von Bildern ist eine regelmäßige Aufgabe für Entwickler. Die Entwickler sollten es richtig machen. Es empfiehlt sich, die Größe der Bilder entsprechend ihrer Containergröße zu ändern. Es hilft Ihnen, die Seitengeschwindigkeit zu verbessern. In diesem Artikel untersuchen wir, wie Sie die Größe des Bildes in Laravel mithilfe der Interventionsbildbibliothek ändern.
Die Interventions-Bildbibliothek bietet eine einfache Möglichkeit, die Größe der Bilder zu ändern. Diese Bibliothek verwendet GD Library und Imagick für die Bildbearbeitung unter der Haube.
Warum sollte die Größe von Bildern geändert werden?
Nehmen Sie das Beispiel einer Galerie. Während 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.
Nehmen wir an, Ihre Originalbildgröße beträgt 500 500 und Ihr Miniaturansichtscontainer hat die Größe 200200. In diesem Fall sollten Sie die Größe des Originalbilds entsprechend der Containergröße der Miniaturansicht ändern. Die Verwendung eines großen Bildes in einem kleinen Container ist eine schlechte Praxis. Es beeinflusst die Leistung der Website.
Dies ist ein Beispiel dafür, warum wir die Größe der Bilder ändern sollten. Es gibt auch viele andere. Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie die Größe des Bildes in Laravel mithilfe der Interventionsbildbibliothek ändern.
Installation
Um zu beginnen, müssen Sie die Intervention Image-Bibliothek in Ihrem Laravel-Projekt installieren. Sie sollten Composer auf dem System installiert. Öffnen Sie das Terminal in Ihrem Projekt-Stammverzeichnis und führen Sie den folgenden Befehl aus:
composer require intervention/imageÖffnen Sie nach der Installation der Bibliothek die config/app.phpDatei und fügen Sie die folgenden Zeilen hinzu.
Fügen Sie dem $providersArray den Dienstanbieter dieses Pakets hinzu .
InterventionImageImageServiceProvider::classAls nächstes fügen Sie die Fassade zum $aliasesArray hinzu.
'Image' => InterventionImageFacadesImage::classBildgröße in Laravel ändern
Um die Größe des Bildes zu ändern, müssen 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ühren Sie den Befehl aus:
php artisan storage:linkDieser Befehl erstellt ein ‘storage’-Verzeichnis unter dem ‘public’-Ordner. Im Ordner ‘storage’ speichern wir eine Vollversion und eine Miniaturansicht der Bilder.
Erstellen Sie als Nächstes ein Formular in Ihrer Ansichtsdatei. Ich füge auch Code für die Erfolgsmeldung in der Blade-Datei hinzu.
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
<form action="{{ url('PASS_ACTION_URL') }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" name="profile_image" id="exampleInputFile">
</div>
{{ csrf_field() }}
<button type="submit" class="btn btn-default">Submit</button>
</form>Ersetzen Sie den Platzhalter ‘PASS_ACTION_URL’ durch Ihre Route.
In der Steuerung ist es erforderlich, das Fassaden-‘Image’ einer Bibliothek hinzuzufügen, die wir in der config/app.phpDatei hinzugefügt haben .
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use Image;
class ImageController extends Controller
{
}Durch das Hinzufügen der Fassade können wir Funktionen der Intervention Image Library aufrufen. Im folgenden Code werde ich das Bild an zwei Stellen hochladen. Eines ist das Originalbild im Ordner „profile_images”. Der zweite befindet sich im Verzeichnis ‘profile_images/thumbnail’. Ich werde zuerst das Originalbild in den Thumbnail-Ordner hochladen und dann die Größe ändern.
public function store(Request $request)
{
if($request->hasFile('profile_image')) {
//get filename with extension
$filenamewithextension = $request->file('profile_image')->getClientOriginalName();
//get filename without extension
$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
//get file extension
$extension = $request->file('profile_image')->getClientOriginalExtension();
//filename to store
$filenametostore = $filename.'_'.time().'.'.$extension;
//Upload File
$request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
$request->file('profile_image')->storeAs('public/profile_images/thumbnail', $filenametostore);
//Resize image here
$thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
$constraint->aspectRatio();
});
$img->save($thumbnailpath);
return redirect('image')->with('success', "Image uploaded successfully."); //change the route as per your flow
}
}Hier verkleinere ich das Bild proportional. Dabei behalten Sie das Seitenverhältnis bei und das Bild wird nicht abgeschnitten. Ich habe Breite als 400 und Höhe als 150 übergeben. Sie können diese Werte nach Ihren Wünschen ändern.
Wenn Sie nach hartem Zuschneiden suchen, ersetzen Sie die folgenden Zeilen
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
$constraint->aspectRatio();
});
$img->save($thumbnailpath);Mit
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);Danach erhalten Sie das Thumbnail mit einer Dimension von 100*100.
Ich hoffe, Sie erfahren mehr über die Größenänderung des Bildes in Laravel mithilfe der Interventionsbildbibliothek. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.
Zum Thema passende Artikel
- Bildoptimierung mit artisansweb/image-optimizer Package
- Eine Anleitung zum Hochladen und Komprimieren von Bildern in Laravel
- Bildgröße in PHP mit TinyPNG ändern