Zmień rozmiar obrazu w Laravel za pomocą biblioteki obrazów interwencyjnych

Ostatnio jeden z naszych czytelników zapytał, jak zmienić rozmiar obrazu w Laravelu. Zmiana rozmiaru obrazu to regularne zadanie dla programistów. Deweloperzy powinni to zrobić poprawnie. Dobrą praktyką jest zmiana rozmiaru obrazów zgodnie z rozmiarem kontenera. Pomaga poprawić szybkość strony. W tym artykule dowiemy się, jak zmienić rozmiar obrazu w Laravel za pomocą biblioteki obrazów interwencyjnych.

Interwencja Biblioteka obrazów zapewnia łatwy sposób zmiany rozmiaru obrazów. Ta biblioteka wykorzystuje GD Library i Imagick do manipulacji obrazami pod maską.

Dlaczego należy zmieniać rozmiar obrazów?

Weźmy na przykład galerię. Podczas pracy nad galerią zwykle wyświetlamy małą miniaturę na liście. Gdy ktoś kliknie miniaturę, pokażemy oryginalny obraz. Tutaj miniatury są zmienioną wersją oryginalnego obrazu.

Załóżmy, że rozmiar oryginalnego obrazu to 500 500, a rozmiar kontenera miniatur to 200 200. W takim przypadku należy zmienić rozmiar oryginalnego obrazu zgodnie z rozmiarem kontenera miniatury. Używanie obrazu o dużym rozmiarze w małym pojemniku to zła praktyka. Wpływa na wydajność strony.

To jeden z przykładów, dlaczego powinniśmy zmienić rozmiar obrazów. Jest też wiele innych. Powiedziawszy to, przyjrzyjmy się, jak zmienić rozmiar obrazu w Laravel za pomocą biblioteki obrazów interwencyjnych.

Instalacja

Aby rozpocząć, musisz zainstalować bibliotekę Intervention Image w swoim projekcie Laravel. Powinieneś mieć zainstalowany Composer w swoim systemie. Otwórz terminal w katalogu głównym projektu i uruchom poniższe polecenie:

composer require intervention/image

Po zainstalowaniu biblioteki otwórz config/app.phpplik i dodaj do niego następujące wiersze.

Dodaj dostawcę usług tego pakietu do $providerstablicy.

InterventionImageImageServiceProvider::class

Następnie dodaj fasadę do $aliasestablicy.

'Image' => InterventionImageFacadesImage::class

Zmień rozmiar obrazu w Laravel

Aby zmienić rozmiar obrazu, musimy najpierw napisać kod do załadowania obrazu. Więc najpierw utwórz katalog, w którym będziemy przechowywać obrazy. Udaj się do terminala i uruchom polecenie:

php artisan storage:link

To polecenie tworzy katalog „storage" w folderze „public”. W folderze „storage” będziemy przechowywać pełną i miniaturową wersję obrazów.

Następnie utwórz formularz w pliku widoku. Dodaję również kod do wiadomości o sukcesie w pliku ostrza.

@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>

Zastąp symbol zastępczy „PASS_ACTION_URL” swoją trasą.

W kontrolerze należy dodać fasadę ‘Image’ biblioteki, którą dodaliśmy w config/app.phppliku.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Image;
 
class ImageController extends Controller
{
 
}

Dodając fasadę jesteśmy w stanie wywołać funkcje biblioteki obrazów interwencyjnych. W poniższym kodzie wrzucę obrazek w dwóch miejscach. Jednym z nich jest oryginalny obraz w folderze „profile_images”. Drugi znajduje się w katalogu ‘profile_images/thumbnail’. Najpierw prześlę oryginalny obraz do folderu miniatur, a następnie zmienię jego rozmiar.

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
    }
}

Tutaj zmieniam rozmiar obrazu proporcjonalnie. W ten sposób zachowasz proporcje, a obraz nie zostanie obcięty. Przekazałem szerokość jako 400 i wysokość jako 150. Możesz zmienić te wartości zgodnie z wymaganiami.

Jeśli szukasz mocnego przycinania, zastąp poniższe linie

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

Z

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

Następnie otrzymasz miniaturę o wymiarze 100*100.

Mam nadzieję, że możesz dowiedzieć się o zmianie rozmiaru obrazu w Laravel za pomocą biblioteki obrazów interwencyjnych. Podziel się swoimi przemyśleniami i sugestiami w sekcji komentarzy poniżej.

Powiązane artykuły

• Optymalizacja obrazu za pomocą pakietu artisansweb/image-optimizer
• Przewodnik po przesyłaniu i kompresowaniu obrazów w Laravel
• Zmień rozmiar obrazu w PHP za pomocą TinyPNG