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

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Dlaczego powinniśmy zmieniać rozmiar obrazów?

Zmień rozmiar obrazu w PHP za pomocą obrazu interwencyjnego

Szukasz sposobu na zmianę rozmiaru obrazów w PHP? Pracując nad aplikacją webową musimy stworzyć różne miniaturowe wersje oryginalnego obrazu. Miniatura to zmieniona wersja oryginalnego obrazu. W tym artykule dowiemy się, jak przesyłać i zmieniać rozmiar obrazów w PHP.

Dlaczego powinniśmy zmieniać rozmiar obrazów?

Na stronie istnieje kilka scenariuszy, w których musimy wyświetlić krótką wersję dużego obrazu. Popularnym przykładem jest Galeria Obrazów. W galerii zwykliśmy wyświetlać listę małych obrazków. Gdy użytkownik kliknie mały obraz, otworzy się duży obraz w wyskakującym okienku. Innym przykładem jest wyświetlanie powiązanych artykułów, w których pokazujemy małe obrazki wraz z tytułem i opisem postu.

W tych scenariuszach musimy wygenerować mały obraz (miniaturę) przy użyciu naszego oryginalnego obrazu. Mała miniatura zmniejsza rozmiar twoich stron. Ponieważ używasz małej miniatury, przeglądarka wymaga niskiej przepustowości do załadowania obrazu. Doda trochę korzyści do strony internetowej. Niektórzy z nich są:

Poprawia wydajność serwera
Zmniejsz przepustowość
Popraw szybkość strony

Biorąc to pod uwagę, przyjrzyjmy się, jak zmienić rozmiar obrazu w PHP.

Pierwsze kroki

Intervention Image to biblioteka typu open source, która działa jako narzędzie do zmiany rozmiaru obrazu. Pod maską Intervention Image wykorzystuje GD Library i Imagick do przetwarzania i manipulacji obrazami.

Aby rozpocząć, musisz zainstalować bibliotekę obrazów interwencji w swojej aplikacji. Do instalacji biblioteki polecam używać Composera.

Otwórz terminal w katalogu głównym projektu i uruchom poniższe polecenie.

composer require intervention/image

Po zainstalowaniu biblioteki musisz uwzględnić jej środowisko w swojej aplikacji. W tym celu dołącz poniżej dwie linie do pliku PHP.

<?php
// include composer autoload
require 'vendor/autoload.php';
  
use InterventionImageImageManagerStatic as Image;

Aby przesłać obraz i zmienić jego rozmiar, potrzebujemy formularza, w którym można go przeglądać i nacisnąć przycisk przesyłania. Użyj poniższego kodu HTML, który zawiera dane wejściowe pliku i przycisk przesyłania.

<form method="post" enctype="multipart/form-data">
    <p><input type="file" name="image" /></p>
    <input type="submit" name="submit" value="Submit">
</form>

Zmień rozmiar obrazu w PHP za pomocą obrazu interwencyjnego

Zainstalowaliśmy bibliotekę i stworzyliśmy formularz. Następnie musimy załadować i zmienić rozmiar obrazu w locie. Zamierzam stworzyć dwa katalogi uploadsi thumbnails. W uploadsfolderze będziemy przechowywać oryginalny obraz. Miniaturowa wersja obrazu będzie przechowywana w thumbnailskatalogu.

Użyj poniższego kodu, który zapisze oryginalną i miniaturową wersję obrazu odpowiednio w katalogach uploadsi thumbnails.

<?php
require 'vendor/autoload.php';
  
use InterventionImageImageManagerStatic as Image;
 
$allowed_mime_type = array('image/jpg', 'image/jpeg', 'image/png', 'image/gif');
 
if (isset($_POST['submit'])) {
 
    if (in_array($_FILES['image']['type'], $allowed_mime_type)) {
 
        if (!file_exists('uploads')) {
            mkdir('uploads', 0755);
        }
 
        $filename = time().'_'.$_FILES['image']['name'];
        $filepath = 'uploads/'. $filename;
        move_uploaded_file($_FILES['image']['tmp_name'], $filepath);
 
        if (!file_exists('uploads/thumbnails')) {
            mkdir('uploads/thumbnails', 0755);
        }
 
        $thumbnailpath = 'uploads/thumbnails/'. $filename;
        $img = Image::make($filepath);
        $img->resize(300, null, function ($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
    }
}

W powyższym kodzie przekazałem szerokość jako 300 i zmieniłem rozmiar obrazu, zachowując jego proporcje. Możesz przekazać wartość szerokości zgodnie z wymaganiami. Zaleca się zachowanie proporcji obrazu podczas zmiany rozmiaru obrazu. Przy użyciu współczynnika proporcji obraz nie zostanie rozciągnięty. Jeśli jednak szukasz twardej uprawy, zastąp poniższe linie

$img->resize(300, null, function ($constraint) {
    $constraint->aspectRatio();
});

$img->resize(300, 150)->save($thumbnailpath);

Wniosek

W tym samouczku dowiedzieliśmy się, jak zmieniać rozmiar obrazów, zachowując ich proporcje. Napisaliśmy również kod, który mocno przytnie obraz. Interwencja Biblioteka obrazów zapewnia kilka dodatkowych opcji dla resizemetody. Możesz przeczytać więcej na ten temat w ich dokumentacji.

Powiązane artykuły

Źródło nagrywania: artisansweb.net