phpBuddy

Tutorials und Workshops

Wie kann man Daten in eine Datenbank schreiben und wieder auslesen? Wie schützt man sein Gästebuch vor Spam? Wie erstellt man eine Bildergalerie?
Diese und mehr Fragen werden in der Tutorial Rubrik sehr detailliert und leicht verständlich erklärt.

Sie sind hier: Startseite Thumbnail Funktion
Thumbnail Funktion

Eine von Anfängern am häufigsten gestellte Frage ist die nach der Möglichkeit serverseitig Thumbnails zu erstellen. Was auf den ersten Blick etwas kompliziert aussieht, entpuppt sich als ziemlich einfache Aufgabe, bei der man nur etwas logischen Verstand und grundlegende Mathematikkenntnisse benötigt.

Als Denkanstoß, oder für die, die zu faul sind selbst zu denken, habe ich hier mal 2 Thumbnail Funktionen zu einer Funktion zusammengefasst. Ein Teil der Funktion erzeugt, und gibt aus oder speichert, ein proportionales Thumbnail, während der andere Teil ein quadratisches Thumbnail erzeugt, wie es zum Beispiel im Einfaches Galerie Script ohne MySQL zum Einsatz kommt. Gesteuert wird die Ausgabe durch einen zusätzlichen Parameter.
Hier zunächst der Code der Funktion:

function makeThumb( $bild, $maxbreite = 100, $maxhoehe = 100, $quadratisch = false, $qualitaet = 80, $speichern = NULL )
{
    // Bilddaten auslesen
    list( $original_breite, $original_hoehe, $typ, $imgtag, $bits, $channels, $mimetype ) = @getimagesize( $bild );
 
    switch ($typ)
    {
        case '1': $originalbild = imagecreatefromgif( $bild ); break;
        case '2': $originalbild = imagecreatefromjpeg( $bild ); break;
        case '3': $originalbild = imagecreatefrompng( $bild ); break;
        default :
            header( 'Content-Type: text/html; charset=utf-8' );
            die( 'Die übergebene Datei ist keine Grafik!' );
        break;
    }
 
    if ($quadratisch === false)
    {
        // Höhe und Breite für proportionales Thumbnail berechnen
        if ($original_breite > $maxbreite || $original_hoehe > $maxhoehe)
        {
            $thumb_breite = $maxbreite;
            $thumb_hoehe  = $maxhoehe;
            if ($thumb_breite / $original_breite * $original_hoehe > $thumb_hoehe)
            {
                $thumb_breite = round( $thumb_hoehe * $original_breite / $original_hoehe );
            }
            else
            {
                $thumb_hoehe = round( $thumb_breite * $original_hoehe / $original_breite );
            }
        }
        else
        {
            $thumb_breite = $original_breite;
            $thumb_hoehe = $original_hoehe;
        }
        // Thumbnail erstellen
        $thumb = imagecreatetruecolor( $thumb_breite, $thumb_hoehe );
        imagecopyresampled( $thumb, $originalbild, 0, 0, 0, 0, $thumb_breite, $thumb_hoehe, $original_breite, $original_hoehe );
    }
    else if ($quadratisch === true)
    {
        // Kantenlänge für quadratisches Thumbnail ermitteln
        $originalkantenlaenge = $original_breite < $original_hoehe ? $original_breite : $original_hoehe;
        $tmpbild = imagecreatetruecolor( $originalkantenlaenge, $originalkantenlaenge );
        if ($original_breite > $original_hoehe)
        {
            imagecopy( $tmpbild, $originalbild, 0, 0, round( $original_breite-$originalkantenlaenge )/2, 0, $original_breite, $original_hoehe );
        }
        else if ($original_breite <= $original_hoehe )
        {
            imagecopy( $tmpbild, $originalbild, 0, 0, 0, round( $original_hoehe-$originalkantenlaenge )/2, $original_breite, $original_hoehe );
        }
        // Thumbnail erstellen
        $thumb = imagecreatetruecolor( $maxbreite, $maxbreite );
        imagecopyresampled( $thumb, $tmpbild, 0, 0, 0, 0, $maxbreite, $maxbreite, $originalkantenlaenge, $originalkantenlaenge );
    }
 
    // Korrekten Image Header senden, wenn nicht gespeichert wird
    if (!$speichern) { header( 'Content-Type: ' . $mimetype ); }
    switch ($typ)
    {
        case '1': imagegif( $thumb, $speichern ); break;
        case '2': imagejpeg( $thumb, $speichern, $qualitaet ); break;
        case '3': imagepng( $thumb, $speichern ); break;
        default : imagejpeg( $thumb, $speichern, $qualitaet ); break;
    }
    // Speicher freigeben
    imagedestroy( $thumb );
}

Die Funktion erwartet insgesamt 6 Parameter, wovon 5 optional sind. Im einzelnen sind das:

  1. $bild - Pfad und Bildname zum Originalbild (muss angegeben werden)
  2. $maxbreite - Maximale Breite des Thumbnail (Standard 100px)
  3. $maxhoehe - Maximale Höhe des Thumbnail (Standard 100px)
  4. $quadratisch - Quadratisches oder proportionales Thumbnail (Standard proportional)
  5. $qualitaet - JPEG Qualität (Standard 80%)
  6. $speichern - Pfad und Name des zu speichernden Thumbnails (Standard NULL)

Soweit der Code und die erwarteten Parameter, schauen wir uns nun einige Anwendungsbeispiele an.


Anwendungsbeispiele der Thumbnail Funktion

Thumbnail proportional ohne speichern

makeThumb( "echse.jpg", 90, 90, false );

Hier übergeben wir den Namen des Bildes echse.jpg an die Funktion und überschreiben die 100px Standardvorgabe. Das Bild wird also verkleinert, bis entweder die Höhe oder die Breite 90px erreicht haben. Das sieht z.B. so aus:

Thumbnail quadratisch ohne speichern

makeThumb( "echse.jpg", 100, 100, true );

Durch die Übergabe von true als 4. Parameter, wird das Thumbnail quadratisch erzeugt. Dabei wird als maximale Kantenlänge der Wert genommen, der der Funktion als $maxbreite übergeben wird. Die Angabe für die $maxhoehe wird dabei ignoriert. Beispiel-Thumbnails:

Thumbnail quadratisch mit speichern

Um ein Thumbnail nicht an den Browser zu schicken, sondern auf dem Server zu speichern, müssen alle Parameter angegeben werden.

makeThumb( "echse.jpg", 90, 90, true, 80, 'echse_thumbnail.jpg' );

In diesem Beispiel würde ein quadratisches Thumbnail mit 90px Kantenlänge und 80% JPEG-Qualität unter dem Name echse_thumbnail.jpg gespeichert werden. (CHMOD Rechte setzen nicht vergessen!)


Fazit

Wie man sieht ist es sehr einfach schicke Thumbnails zu erzeugen. Neben JPEG verarbeitet die Funktion auch GIF und PNG Grafiken, wobei die spezifische Ausgabe an den Bildtyp angepasst wird. Das soll bedeuten, dass natürlich keine Qualität bei einem PNG gesetzt werden kann, ebenso wird für jeden Typ der korrekte Header gesendet, damit eine direkte Ausgabe im Browser, ohne speichern, möglich ist.

Diese Funktion wurde "auf die Schnelle" aus 2 Einzelfunktionen zusammengefügt. Wer also Verbesserungsvorschläge hat kann mir diese gerne schicken (mit der Lösung!) und ich werde sie bei einem nächsten Update berücksichtigen.

Viel Spaß beim Thumbnail erzeugen! :-)

Thumbnail Funktion