|
Nowa przychodnia weterynaryjna w Kampinosie - Niepokalanowska 4. |
Porady i algorytmy
ImageCopyResampled() w praktyce - tworzenie miniatur obrazów
Opublikowano 20.12.2007 r. w kategorii PHP.
Odsłon: 6597.
Często na własnej stronie internetowej wstawiamy różnego rodzaju obrazy, aby uatrakcyjnić jej wygląd. Jednakże obrazki o większych rozmiarach często psują layout strony. Wtedy zwykle używamy miniatur, czyli niewielkich obrazków, które reprezentują znacznie większe oryginały. Ale tutaj pojawia się dylemat: w jaki sposób ów miniatury utworzyć? Otóż, rozwiązania mamy przynajmniej trzy.
Rozwiązanie 1.
Problem ten najszybciej i najprościej można rozwiązać wgrywając na serwer plik graficzny, który chcemy wstawić na stronę, a następnie, gdy zachodzi potrzeba wyświetlenia miniatury, posiłkować się parametrami Width oraz Height znacznika <img>. Wystarczy więc, że napiszemy:
<img src="oryginal.jpg" width="x" height="y">
a problem zostanie rozwiązany. Rozwiązanie to, chociaż najprostsze, wcale nie jest najlepsze (aby nie powiedzieć, że jest to rozwiązanie najgorsze...). Dlaczego? Dlatego, że w trakcie odwiedzania witryny z serwera do komputera odwiedzającego wysłany będzie plik o normalnych (oryginalnych) wymiarach. Jeśli obraz ma dużą rozdzielczość spowolni to znacznie proces wczytywania strony, szczególnie u osób dysponujących połączeniem internetowym o niewielkiej przepustowości (np. połączenie przez modem lub GPRS), nawet jeśli został on w powyższy sposób "przeskalowany". Poza tym, należy pamiętać o limicie transferu serwera, który może się zbyt szybko wyczerpać, jeśli plików graficznych będzie dużo. W związku z powyższym, rozwiązanie to nie jest godne polecenia; niestety wielu niedoświadczonych webmasterów stosuje właśnie tę metodę.
Rozwiązanie 2.
Drugim sposobem jest wgranie dwóch plików na serwer - grafiki o normalnych rozmiarach oraz jej miniatury. Sposób ten, z punktu widzenia odwiedzającego, jest lepszy niż powyższe rozwiązanie, ponieważ przy przeglądaniu strony z grafiką pobierane są tylko miniatury, a dopiero wówczas gdy internauta będzie chciał zobaczyć obraz w pełnych rozmiarach zostanie wysłany większy plik. Z kolei dla webmastera zaletą jest zmniejszone ryzyko przekroczenia limitu serwera, ale wadą zwiększony nakład pracy: grafikę trzeba wcześniej przeskalować do mniejszych rozmiarów, wgrać dwa pliki na serwer, a przy chęci zmiany jednego z nich całą procedurę trzeba wykonać ponownie. Mimo tej niedogodności jest to najlepsze rozwiązanie dla osób, których serwer nie ma obsługi PHP.
Rozwiązanie 3.
Wreszcie przyszedł czas na ostatni z przedstawionych - trzeci sposób. Opiera się on na wykorzystaniu funkcji PHP ImageCopyResampled(). Pozwala ona na przeskalowanie obrazka do podanych rozmiarów po stronie serwera, dzięki czemu webmaster strony ma ułatwione zadanie - wystarczy, że wgra na serwer plik o oryginalnych rozmiarach, a poniższa funkcja przeskaluje go, gdy będzie to wymagane.
<?php
// Pobieramy nazwę pliku, na którym będziemy pracować
if (IsSet($_GET['filename']))
$FileName = $_GET['filename'];
else
exit;
// Definiujemy maksymalną wysokość i szerokość miniatury
$Width = 150;
$Height = 150;
// Wysyłamy Content-type
Header('Content-type: image/jpeg');
$OriginalImage = ImageCreateFromJpeg($FileName);
// Pobieramy informację o rozmiarach obrazka
list($OriginalWidth, $OriginalHeight) = GetImageSize($FileName);
/* W tym przypadku skalujemy tylko obrazy, których wysokość
i/lub szerokość są większe niż założone powyżej. Nic nie stoi
na przeszkodzie, aby skrypt przerobić tak, aby skalowane były
również mniejsze obrazy. */
if ($OriginalWidth > $Width || $OriginalHeight > $Height)
{
$ResampleRatio = $OriginalWidth / $OriginalHeight;
if ($Width / $Height > $ResampleRatio)
$Width = $Height * $ResampleRatio;
else
$Height = $Width / $ResampleRatio;
}
else
{
$Width = $OriginalWidth;
$Height = $OriginalHeight;
}
// Skalujemy obraz...
$ResampledImage = ImageCreateTrueColor($Width, $Height);
ImageCopyResampled($ResampledImage, $OriginalImage, 0, 0, 0, 0,
$Width, $Height, $OriginalWidth, $OriginalHeight);
// i wyświetlamy go (ostatni parametr odpowiada za jakość obrazka)
ImageJpeg($ResampledImage, null, 100);
?>
Powyższy skrypt został uproszony tak, aby ułatwić zrozumienie działania funkcji ImageCopyResampled() i jest jedynie namiastką tego, co możemy osiągnąć wykorzystując funkcje PHP odpowiedzialne za manipulowanie plikami graficznymi.
Przedstawiony skrypt można rozbudować na wiele sposobów: zamiast prostego wyjścia ze skryptu poleceniem exit, możemy wyświetlić obrazek informujący odwiedzającego o braku właściwego pliku. Możemy również dodać obsługę plików typu png lub gif.
Skrypt zapisujemy pod dowolną nazwą (np. thumb.php) i wyświetlamy go w następujący sposób:
<img src="http://twoj-serwer.pl/thumb.php?filename=oryginal.jpg">
W przypadku dodatkowych pytań zapraszam do bezpośredniego kontaktu ze mną.