RSS Feed abonnieren

Vorschaubilder (Thumbnails) einfach mit PHP realisieren

Heute stelle ich euch einmal meine PHP Klasse „thumbnail“ vor mit welcher sich auf einfache Art und Weise Bilder dynamisch skalieren und/oder zuschneiden lassen. Die Klasse kann aktuell nur mit JPEG-Bildern umgehen, was für den üblichen Einsatz im Web ausreichen sollte.

Hier zuerst unser Originalbild welches wir als Ausgangsbasis für die Arbeit mit der Klasse benutzen wollen. Das Bild hat im Original die Größe 2032×1524 Pixel, im folgenden Beispielen als Bild.jpg bezeichnet.

Originalbild  (2032x1524 Pixel)

Originalbild (2032x1524 Pixel, skaliert)

Als nächstes benötigen wird meine Klasse „thumbnail“ welche wir als thumbnail.php abspeichern. Es folgen nun Beispiele für den Einsatz dieser Klasse.

Beispiele

Zuerst werde ich das Funktionsprinzip der Klasse etwas erläutern. Zuerst wird das Bild mit der Funktion create() geladen. Diese erwartet entweder eine Pfadangaben oder die Binärdaten des Bildes als String. Als nächtes sollte mit der Funktion setQuality() die (JPEG-) Qualität des Ausgabebildes festgelegt werden. Paramater sind Integer-Werte von 1 bis 100 wobei 100 die höchste Qualität ist. Ein guter Kompromiss zwischen Dateigröße und Qualität stellen Werte von etwa 85 bis 95 dar. Als nächstes wird das Bild mit den verschiedenen Funktionen bearbeitet. Anschliessend kann es mittels der Funktion save() abgespeichert und/oder mittels output() als Bild an den Browser gesendet werden.

Bild proportional verkleinern, Funktion resize()

Beim proportionalen Verkleinern kommt die Funktion resize() zum Einsatz. Resize besitzt 2 Parameter, als Erstes die neue Breite und Zweitens die neue Höhe. Wird nur ein Parameter angegeben und der jeweils andere ist false erfolgt die Skalierung proportional. resize() akzeptiert entweder Integer-Werte (als Angabe der Pixel) oder eine String mit einer Prozentangabe, zum Beispiel resize(„25%“).

Folgendes Beispiel skaliert unser Bild proportional auf 200 Pixel Breite und gibt es aus.

<?php
        include_once("thumbnail.php");
        $thumbnail = new thumbnail();
        $thumbnail->create("Bild.jpg");
        $thumbnail->setQuality(90);
        $thumbnail->resize("200");
        $thumbnail->output();
?>

Ergebnis in Originalgröße

Ergebnis in Originalgröße

Hier ein Beispiel für die unproportionale Skalierung mit Prozentangaben, Breite 5% und Höhe 10% vom Originalbild.

<?php
        include_once("thumbnail.php");
        $thumbnail = new thumbnail();
        $thumbnail->create("Bild.jpg");
        $thumbnail->setQuality(90);
        $thumbnail->resize("5%","10%");
        $thumbnail->output();
?>

Ergebnis in Originalgröße

Ergebnis in Originalgröße

Minimale und maximale Kantenlänge, Funktionen minSize() und maxSize()

Die Funktionen minSize() und maxSize() sind Funktionen zur proportionalen Skalierung des Bildes. Die Funktionen ermitteln die jeweils kürzeste oder längeste Kante und skalieren das Bild proportional so das die kürzeste oder längste Kante dem gewünschten Ergebnis entspricht. Sehr vorteilhaft ist hier vor allem die Funktion maxSize() welche sehr gut für Bildergalerien genutzt werden kann, in welchen in tabellarischer Form Hoch- und Querformatbilder dargestellt werden sollen. Beide Funktionen erwarten jeweils einen Parameter mit einem Integer-Wert als Pixelangabe.

Das folgende Beispiel bezieht sich die die Funktion minSize() und skaliert unser Originalbild so das die kleinste Seite 100 Pixel lang ist.

<?php
        include_once("thumbnail.php");
        $thumbnail = new thumbnail();
        $thumbnail->create("Bild.jpg");
        $thumbnail->setQuality(90);
        $thumbnail->minSize(100);
        $thumbnail->output();
?>

Ergebnis in Originalgröße

Ergebnis in Originalgröße

Einen Ausschnitt des Bildes extrahieren, Funktion autocut()

Zum Extrahieren eines Bildausschnittes gibt es zwar die Funktion cut(), auf die möchte ich jedoch erst später eingehen. Für den einfachen Einsatz empfiehlt sich die Funktion autocut() die dem Anwender schon einige Berechnungen abnimmt. Die Funktion autocut() zerlegt das Bild gedanklich in 9 Teile wie hier schematisch dargestellt.

+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 |
+---+---+---+
| 7 | 8 | 9 |
+---+---+---+

autocut() erwartet nun 3 Parameter, zum Ersten die Breite des Bildausschnittes (auch als Prozentangaben möglich), zum Zweiten die Höhe des Bildausschnittes (auch als Prozentangaben möglich) und zum Dritten die Nummer des gewünschten Bildbereiches. Möchte man also einen 100×100 Pixel großen Ausschnitt aus der Mitte des Bildes ergibt dies folgende Parameter autocut(100,100,5). Sehen wir uns das Beispiel dafür an. Hier läßt sich auch erkennen das mehrere Funktionen nacheinander auf das Bild angewendet werden können.

Wir verkleinern unser Bild zuerst auf die Breite von 200 Pixel und schneiden anschliessend einen 100×100 Pixel großen Bildausschnitt aus der Mitte des Bildes.

<?php
        include_once("thumbnail.php");
        $thumbnail = new thumbnail();
        $thumbnail->create("Bild.jpg");
        $thumbnail->setQuality(90);
        $thumbnail->resize(200);
        $thumbnail->autocut(100,100,5);
        $thumbnail->output();
?>

Ergebnis in Originalgröße

Ergebnis in Originalgröße

Einen Ausschnitt des Bildes extrahieren, Funktion cut()

Die Funktion cut() macht das gleiche wie die Funktion autocut(), allerdings werden hier als Parameter die Pixelangaben für die linke obere Ecke des Bildausschnittes erwartet. Schematisch sieht das ganze so aus:

      $srcX
      +---+--------------+
$srcY |   |              |
      +---+---+          |
      |   |   | $newY    | Ursprungsbild
      |   +---+          |
      |   $newX          |
      |                  |
      +------------------+

Folgendes Beispiel soll aus der auf 200 Pixel verkleinerten Version des Bildes einen Bildauschnitt von 100×60 Pixel ($newX=100, $newY=60) extrahieren, welche genau an der oberen rechten Ecke liegt. $srcX ist die Breite abzüglich $newX und $srcY ist somit 0.

<?php
        include_once("thumbnail.php");
        $thumbnail = new thumbnail();
        $thumbnail->create("Bild.jpg");
        $thumbnail->setQuality(90);
        $thumbnail->resize(200);
        $thumbnail->cut(100,60,$thumbnail->width() - 100,0);
        $thumbnail->output();
?>

Ergebnis in Originalgröße

Ergebnis in Originalgröße

Ein Quadrat erzeugen, Funktion cube()

Mit der Funktion cube() läßt sich das Bild zu einem Quadrat zurechtschneiden. Es wird hierbei vorab automatisch auf die beste Größe hierfür skaliert, natürlich proportional. Der erste Parameter gibt hierbei die Kantenlänge des Quadrates an und der zweite Parameter die Position für den Zuschnitt, siehe die schematische Darstellung zur Funktion autocut().

Folgendes Beispiel erzeugt aus dem Originalbild ein Quadrat mit Kantenlänge 150 Pixel. Der zweite Parameter wurde weggelassen, so wird automatisch die Mitte für den Zuschnitt gewählt.

<?php
        include_once("thumbnail.php");
        $thumbnail = new thumbnail();
        $thumbnail->create("Bild.jpg");
        $thumbnail->setQuality(90);
        $thumbnail->cube(150);
        $thumbnail->output();
?>

Ergebnis in Originalgröße

Ergebnis in Originalgröße

tempo@deruwe.de jl@deruwe.de