Utwórz miniaturę w Laravel za pomocą biblioteki obrazów interwencyjnych

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Na stronie zawsze zajmujemy się obrazami. W zależności od wymagań używamy różnych wersji obrazów. Dobrą praktyką dla programistów jest tworzenie różnych wersji, czyli miniaturek pojedynczego obrazu. Te miniatury mogą być używane podczas wyświetlania obrazów o różnych rozmiarach w zależności od rozmiaru kontenera. Wyświetlanie obrazu dopasowanego do rozmiaru kontenera oszczędzi przepustowość i skróci czas ładowania strony. Wyświetlanie obrazu o dużym rozmiarze w małym kontenerze to zła praktyka i skraca czas wczytywania strony. W rezultacie zaleca się tworzenie wielu miniatur obrazu i używanie odpowiedniej wersji tam, gdzie jest to konieczne.

W tym artykule dowiemy się, jak utworzyć miniaturę w Laravel za pomocą biblioteki obrazów interwencyjnych. Intervention Image jest darmową i jedną z popularnych bibliotek do manipulacji obrazami. W tle ta biblioteka używa Biblioteki GD i Imagick do manipulacji obrazami.

W tym samouczku stworzę 3 miniatury – małą, średnią, dużą o rozmiarach odpowiednio 150 93, 300*185, 550 340. Zmień te rozmiary zgodnie z wymaganiami.

Pierwsze kroki

Aby rozpocząć, musisz najpierw zainstalować bibliotekę Intervention Image w Laravel. 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ów usług dla tego pakietu w $providerstablicy.

InterventionImageImageServiceProvider::class

Dodaj fasadę do $aliasesszyku.

'Image' => InterventionImageFacadesImage::class

Następnie, aby przechowywać obrazy, musimy utworzyć katalog. Udaj się do terminala i uruchom polecenie w następujący sposób:

php artisan storage:link

To polecenie tworzy katalog przechowywania (dowiązanie symboliczne) w folderze publicznym. W tym folderze prześlę oryginalny obraz i jego miniatury.

Utwórz miniaturę w Laravel

Wszyscy ustawiliśmy podstawową konfigurację i możemy teraz napisać rzeczywisty kod. Utwórzmy formularz w pliku widoku.

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

W kontrolerze należy dodać fasadę biblioteki ‘Image’ 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. Oryginalny obraz trafia bezpośrednio do storage/profile_imagesfolderu. Miniatury będą przechowywane w storage/profile_images/thumbnailkatalogu. Najpierw przesyłamy oryginalny obraz do folderu miniatur, a następnie zmieniamy 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;
 
        //small thumbnail name
        $smallthumbnail = $filename.'_small_'.time().'.'.$extension;
 
        //medium thumbnail name
        $mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;
 
        //large thumbnail name
        $largethumbnail = $filename.'_large_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $smallthumbnail);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $mediumthumbnail);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $largethumbnail);
  
        //create small thumbnail
        $smallthumbnailpath = public_path('storage/profile_images/thumbnail/'.$smallthumbnail);
        $this->createThumbnail($smallthumbnailpath, 150, 93);
 
        //create medium thumbnail
        $mediumthumbnailpath = public_path('storage/profile_images/thumbnail/'.$mediumthumbnail);
        $this->createThumbnail($mediumthumbnailpath, 300, 185);
 
        //create large thumbnail
        $largethumbnailpath = public_path('storage/profile_images/thumbnail/'.$largethumbnail);
        $this->createThumbnail($largethumbnailpath, 550, 340);
  
        return redirect('image')->with('success', "Image uploaded successfully.");
    }
}

W powyższym kodzie przechowuję obraz w 3 formatach mały, średni i duży. Po ich zapisaniu wywołujemy metodę createThumbnaili przekazujemy do metody wymaganą szerokość, wysokość. Zdefiniujmy tę funkcję poniżej. Ta funkcja powinna przejść do tego samego kontrolera.

/**
 * Create a thumbnail of specified size
 *
 * @param string $path path of thumbnail
 * @param int $width
 * @param int $height
 */
public function createThumbnail($path, $width, $height)
{
    $img = Image::make($path)->resize($width, $height, function ($constraint) {
        $constraint->aspectRatio();
    });
    $img->save($path);
}

Tutaj proporcjonalnie zmieniamy rozmiar obrazu. W ten sposób zachowujemy proporcje, a obraz nie zostanie obcięty.

Jeśli szukasz twardej uprawy, zamień poniższe linie

$img = Image::make($path)->resize($width, $height, function ($constraint) {
    $constraint->aspectRatio();
});
$img->save($path);

$img = Image::make($path)->resize($width, $height)->save($path);

Mam nadzieję, że rozumiesz, jak stworzyć miniaturę w Laravel za pomocą biblioteki obrazów interwencyjnych. Chciałbym usłyszeć twoje przemyślenia w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net