brain-and-trust

PHP - Tutorials

PHP - Einführung

Sitemap

Kontakt

Impressum

LOG IN

LOG OUT


HOME > PHP - Tutorials > Vorschaugrafiken erstellen >


Vorschaugrafiken erstellen

Möchten Sie beispielsweise Ihre Urlaubsfotos in guter Qualität online zur Verfügung stellen, werden Sie keinem Surfer zumuten mögen, dass er abwartet, bis für ein paar Bilder mehrere MByte Daten an seinen Browser geschickt worden sind. Selbst mit schnellen ADSL-Verbindungen kann dabei das Surfen zur Qual werden.

Wir erstellen hier ein Script, das automatisch aus einer angegebenen Datei eine Vorschaugrafik erstellt. Dieses Script eignet sich auch dazu, die Vorschaugrafik größer darzustellen als das Original.

Die hier vorgestellten Befehle setzen die GD-Extension voraus. Lesen Sie das Tutorial zur Installation, um die GD-Extension zu aktivieren. Die meisten Provider haben diese Erweiterung aktiviert.

INHALT

    Das Script für Vorschaugrafiken
    Erläuterung des Scripts

Das Script für Vorschaugrafiken

Das Script erstellt aus einer vorhandenen Grafik eine Kopie und skaliert dieses neue Bild entsprechend der gewünschten Breite, die das neue Bild erhalten soll. Aufgrund der Skalierung variieren die neuen Grafiken in der Höhe, aber immerhin werden unschöne Verzerrungen vermieden.

Um die weiteren Erklärungen zu vereinfachen, nennen wir dieses Script vorschau.php und gehen davon aus, dass es in einer gleichnamigen Datei gespeichert wird.

Sie können über die URL die Breite des Bildes bestimmen. Geschieht dies nicht, wird ein im Script gesetzter Standardwert verwendet.

Auch das Originalbild können Sie über die URL angeben. Aber bedenken Sie dann bitte, dass die Pfadangabe zu dieser Datei entweder relativ von dem Script vorschau.php (../ORDNER/bild.gif) angegeben werden muss, oder eine absolute Angabe in der Form http://www.ihredomain.de/ordner/bild.jpg erforderlich ist. Außerdem sollten Sie nicht vergessen, dass der Dateiname bzw. Pfad URL-konform übertragen werden muss (urlencode()), wenn Sonderzeichen oder Leerzeichen enthalten sind. Auch hier wird ein Standardbild verwendet, wenn keine Angaben mittels der URL übertragen werden.

In unserem Beispiel senden wir die erstellte Kopie an den Browser zurück. Sie können die Kopie aber auch in einen Ordner speichern.
Um sich zu Testzwecken die Vorschaugrafik einer vorhandenen Grafik anschauen zu können, rufen Sie die Datei vorschau.php direkt im Browser auf; dazu geben Sie in die Adressleiste die URL und die gewünschten Parameter ein, z.B.:

http://www.ihredomain.de/vorschau.php?bild=http://www.brain-and-trust.de/spain/Haus_Arcos.jpg&breit=250

oder

http://www.ihredomain.de/vorschau.php?bild=http://www.brain-and-trust.de/spain/Hausvorn.jpg&breit=150

Wie Sie dem Aufrufen des Scripts entnehmen können, erwartet das Script in $breit (breit) die gewünschte Breite der Kopie und in $bild (bild) den Pfad zur Originaldatei.

Sie können das Script natürlich auch im <image>-Tag einer vorhandenen Webseite aufrufen.

<?php
if(!$_GET['breit']){$breit = 150;} else {$breit = ceil($_GET['breit']);}
if(!$_GET['bild']){$quellbild = 'test.jpg';}
else {$quellbild = urldecode($_GET['bild']);}
$info = getimagesize($quellbild);
$breitalt = $info[0];
$hochalt = $info[1];
$hoch = ceil($hochalt*$breit/$breitalt);
switch($info[2])
{
case 1:
$bildalt = imagecreatefromgif($quellbild);
break;
case 2:
$bildalt = imagecreatefromjpeg($quellbild);
break;
}
$bildneu = imagecreate($breit , $hoch);
imagecopyresized($bildneu , $bildalt , 0 , 0 , 0 , 0 , $breit ,$hoch , $breitalt , $hochalt);
header("Content-Type: image/gif");
imagegif($bildneu);
imagedestroy($bildneu);
imagedestroy($bildalt);
?>

Erläuterung des Scripts

Wir legen eine Standardbreite fest für den Fall, dass keine Angabe über die URL erfolgt und $_GET['breit'] dementsprechend nicht gesetzt ist. Gleichzeitig wird, falls $_GET['breit'] mit der URL angegeben wurde, die Breite auf die nächst höhere ganze Zahl aufgerundet. Dies macht der Befehl ceil().

if(!$_GET['breit']){$breit = 150;} else {$breit = ceil($_GET['breit']);}

Mit der folgenden if-Anweisung testen wir, ob über die URL eine Quelldatei angegeben wurde. Ist dies nicht der Fall, sorgen wir für die Verwendung eines Standardbildes, andernfalls wird die URL-Information decodiert.

if(!$_GET['bild']){$quellbild = 'test.jpg';}
else {$quellbild = urldecode($_GET['bild']);}


Hinweis

Dieser Test überprüft nicht, ob diese Datei existiert oder erreichbar ist. Für lokale Dateien können Sie diesen Test schnell mit dem Befehl file_exists() hinzufügen. Für Dateien die über http://... angesprochen werden, ist dieser Test leider nicht trivial und deswegen verzichten wir hier auf diese Überprüfung.


Um Informationen über eine Bilddatei zu ermitteln, steht der Befehl getimagesize() parat. Er liefert die Höhe, Breite und das Dateiformat des Bildes in einem Array.

$info = getimagesize($quellbild);

Nachdem im Array $info die Informationen über das Originalbild enthalten sind, weisen wir die Höhe und Breite, die im nullten und ersten Element des Arrays abgelegt werden, Variablen zu.

$breitalt = $info[0];
$hochalt = $info[1];

Nachdem die Maße des alten Bildes bekannt sind, lässt sich die Höhe des neuen Bildes anhand dieser Werte und der gewünschten Breite berechnen. Das Ergebnis wird mit ceil() auf die nächst höhere ganze Zahl aufgerundet, da man kein Bild mit einer Höhe von 198,765 Pixeln erstellen kann.

$hoch = ceil($hochalt*$breit/$breitalt);

Soweit liegen jetzt die benötigten Informationen vor:

    der Pfad zu Quelldatei in $quellbild
    die Höhe der Originalgrafik in $hochalt
    die Breite der Originalgrafik in $breitalt
    die Höhe der neuen Grafik in $hoch
    die Breite der neuen Grafik in $breite

Nun lesen wir die Originaldatei ein, damit sie anschließend kopiert werden kann.

Da der Befehl, die Informationen einer vorhandenen Bilddatei einzulesen, sich je nach Dateityp unterscheidet, verwenden wir eine Switch-Anweisung. Diese Switch-Anweisung testet $info[2], da zuvor der Befehl getimagesize() das Dateiformat der Originalgrafik hier abgelegt hat.

Die Informationen über das Dateiformat werden über Zahlen kodiert: 1 steht für gif zwei für jpg. Dieser Kodierung entsprechend verwenden wir in den cases die Befehle zum Einlesen der vorhandenen Grafiken je Dateiformat. Das Handle auf die Originalgrafik steht anschließend mit $bildalt bereit.

switch($info[2])
{
case 1:
$bildalt = imagecreatefromgif($quellbild);
break;
case 2:
$bildalt = imagecreatefromjpeg($quellbild);
break;
}

Auf Basis der berechneten Maße wird ein neues Rohbild angelegt.

$bildneu = imagecreate($breit , $hoch);

Das alte Bild wird in das neue Rohbild kopiert. Der Befehl imagecopyresized() erwartet eine Reihe von Argumenten, die Sie in der erforderlichen Reihenfolge in der unten stehenden Auflistung finden. Es werden mehr Angaben erwartet als man zunächst vermuten würde, da es für das Beispiel reichen würde zu sagen: Kopiere das alte Bild in ein neues Bild mit den Maßen X und Y. Der Befehl ist aber mächtiger und braucht deswegen ein paar mehr Angaben, da er auch Ausschnitte einer Grafik an beliebige Stellen der Zielgrafik kopieren kann. In unserem Beispiel sind die Bereiche allerdings identisch mit den kompletten Grafiken.

    Handle auf die Zielgrafik - im Beispiel $bildneu
    Handle auf die Originaldatei - $bildalt
    X-Koordinate der linken oberen Ecke des Bereichs, in den kopiert werden soll (Zielgrafik) - 0, da die gesamte neue Rohgrafik gefüllt werden soll und nicht nur ein Ausschnitt
    Y-Koordinate der linken oberen Ecke des Bereichs, in den kopiert werden soll (Zielgrafik) - 0, da die gesamte neue Rohgrafik gefüllt werden soll und nicht nur ein Ausschnitt
    X-Koordinate der linken oberen Ecke des Bereichs, der kopiert werden soll (Originalgrafik) - 0, da die gesamte Grafik kopiert werden soll und nicht nur ein Ausschnitt
    Y-Koordinate der linken oberen Ecke des Bereichs, der kopiert werden soll (Originalgrafik) - 0, da die gesamte Grafik kopiert werden soll und nicht nur ein Ausschnitt
    Breite des Bereichs, in den kopiert werden soll, in Pixeln (Zielgrafik) - $breit, damit die neue Grafik voll ausgenutzt wird
    Höhe des Bereichs, in den kopiert werden soll, in Pixeln (Zielgrafik) - $hoch, damit die neue Grafik voll ausgenutzt wird
    Breite des Bereichs, der kopiert werden soll, in Pixeln (Originalgrafik) - $breitalt, damit die gesamte Breite der Originalgrafik erfasst wird
    Höhe des Bereichs, der kopiert werden soll, in Pixeln (Originalgrafik) - $hochalt, damit die gesamte Höhe der Originalgrafik erfasst wird

Mit diesen Argumenten versehen sieht der Befehl dann so aus:

imagecopyresized($bildneu , $bildalt , 0 , 0 , 0 , 0 , $breit ,$hoch , $breitalt , $hochalt);

Abschließend schicken wir den Header und das neue Bild an den Browser und dann werden beide Bilder - alt wie neu - im Speicher gelöscht.

header("Content-Type: image/gif");
imagegif($bildneu);
imagedestroy($bildneu);
imagedestroy($bildalt);

© Copyright 2005 by Christine Peyton , Andre Möller


Buch Magnum
 
 
Buch Delfine

Ein paar Links:

Ihr Link hier?