Stoppt die Vorratsdatenspeicherung! Jetzt klicken &handeln! Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:

Navigation:

Besucherzähler:

  • Derzeit online: 7
  • Insgesamt: 67972

Spamfresser:

  • Spams: 12427

GD-Library oder Grafiken mit PHP (3/3)

Kategorie PHP & MySQL

Datum: 25.02.2008, 17:22 - Autor: Manko10

So, nach einiger Zeit der Pause, der Umstellung und der Entstehung des Tutorials Barrierefreie CAPTCHAs geht es weiter mit Teil 3 des GD-Tutorials.

6. Ein erstes Praxisbeispiel

Nachdem wir uns nun die Grundlagen erarbeitet haben, können wir zu brauchbareren Beispielen übergehen (einen einfachen Rahmen mit einem Text darinnen bezeichne ich jetzt nicht so als DAS Event einer Seite).
Stellt sich also die Frage: "was ist brauchbar?"
Gute Frage. Ich würde vorschlagen, eine Thumbnail-Funktion zu basteln. Thumbnails sind kleine Vorschaubildchen für eine größere Grafik. Mit GD ganz leicht zu machen.

Zuerst benötigen wir eine Grafik, von der wir einen Thumbnail erstellen wollen. Entweder nimmst du ein eigenes Bild oder du machst mit diesem weiter.
Wenn das geregelt ist, laden wir unsere Grafik in den Speicher. Da es sich um ein JPEG handelt, müssen wir es auch als ein solches laden:
PHP-Code:
1:
2:
3:
4:
5:
6:
7:
<?php
$pic = imagecreatefromjpeg("butterfly.jpg");

// für andere Dateiformate:
// $pic = imagecreatefrompng("butterfly.png");
// $pic = imagecreatefromgif("butterfly.gif");
?>

Nun entscheiden wir uns, dass die Grafik höchstens 100 Pixel hoch oder breit, jedoch nicht verzerrt sein soll. Also lesen wir die Größe der Grafik aus und errechnen daraus die neuen Werte. Das lässt sich mit getimagesize() bewerkstelligen. Diese Funktion gibt ein Array zurück. Der erste Index gibt die Breite an, der zweite die Höhe.

Tipp!

getimagesize() gibt auch noch zwei weitere Array-Indizes zurück. Die Indizes 0 und 1 habe ich schon vorgestellt.

Der Index 2 beinhaltet einen Zahlen-Code, der den Typ der Grafik angibt (1 = GIF, 2 = JPEG, 3 = PNG, 4 = SWF). Wer sich das nicht merken will, der kann die Konstanten IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG und IMAGETYPE_SWF zum Vergleich verwenden.

Der Index 3 enthält einen String mit den HTML-Attributen height="y" width="x". Ich habs ehrlich gesagt noch nie gebraucht und weiß nicht, wem so etwas nützt, aber dieser Rückgabewert existiert jedenfalls..

PHP-Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
<?php
$size = getimagesize("butterfly.jpg");
$quotient = $size[0] / $size[1];

if ($quotient > 1) {    // breiter als hoch
    $size_x = 100;
    $size_y = 100 / $quotient;
} elseif ($quotient < 1) {    // höher als breit
    $size_x = 100 * $quotient;
    $size_y = 100;
} else {    // gleich hoch und breit
    $size_x = 100;
    $size_y = 100;
}
?>

Nach diesem Arbeitsschritt erstellen wir eine neue Bildfläche für den Thumbnail mit den soeben ermittelten Werten von Breite und Höhe:
PHP-Code:
1:
2:
3:
<?php
$thumb = imagecreatetruecolor($size_x, $size_y);
?>

Das sind die Vorbereitungen. Um den Thumbnail nun aber erstellen zu können, benötigen wir eine neue Funktion. Diese heißt imagecopyresized(). Wie der Name schon aussagt, kopiert er ein Bild auf ein anderes, jedoch mit anderen Ausmaßen. Die Parameterübergabe sieht zunächst etwas kryptisch aus:
Code:
1:
imagecopyresized($zielbildfläche, $ausgangsbildfläche, $zielxkoordinate, $zielykoordinate, $ausgangsxkoordinate, $ausgangsykoordinate, $zielbreite, $zielhöhe, $ausgangsbreite, $ausgangshöhe)

Wenn man den Mechanismus aber einmal begriffen hat, wird es leichter. Wenden wir die Funktion also an.
PHP-Code:
1:
2:
3:
<?php
imagecopyresized($thumb, $pic, 0, 0, 0, 0, $size_x, $size_y, $size[0], $size[1]);
?>

Zuerst gebe ich die leere Bildfläche für den Thumbnail an, dann das Bild, das kopiert werden soll. Die nächsten vier Parameter sind alle auf 0 gesetzt, da ich sowohl beim Original als auch beim Thumbnail jeweils in der oberen linken Ecke anfangen will, zu zeichnen. Danach folgen die Breite und Höhe des Thumbnails sowie Breite und Höhe des zu kopierenden Ausschnitts.

Schließlich muss das ganze wie gewohnt ausgegeben werden. Ich nehme hier das PNG-Format, welches ich persönlich bevorzuge:
PHP-Code:
1:
2:
3:
<?php
imagepng($thumb);
?>

That's it!
Zum Schluss natürlich nochmal der gesamte Code im Zusammenhang:
PHP-Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
<?php
// Originalbild in den Speicher laden
$pic = imagecreatefromjpeg("butterfly.jpg");

// alte Ausmaße bestimmen und daraus neue festlegen
$size = getimagesize("butterfly.jpg");
$quotient = $size[0] / $size[1];

if ($quotient > 1) {    // breiter als hoch
    $size_x = 100;
    $size_y = 100 / $quotient;
} elseif ($quotient < 1) {    // höher als breit
    $size_x = 100 * $quotient;
    $size_y = 100;
} else {    // gleich hoch und breit
    $size_x = 100;
    $size_y = 100;
}

// Zahlen runden
$size_x = round($size_x);
$size_y = round($size_y);

$thumb = imagecreatetruecolor($size_x, $size_y);
imagecopyresized($thumb, $pic, 0, 0, 0, 0, $size_x, $size_y, $size[0], $size[1]);
imagepng($thumb);
?>


Damit ist diese Tutorial-Serie abgeschlossen. Ich hoffe, sie war hilfreich und hat dem einen oder anderen den Einstieg in die GD-Lib erleichtert.

Seiten: (3/3) « 1 2 3

War dieses Tutorial hilfreich?

7 Kommentare:

Datum: 05.12.2008, 09:31 - Autor: Gast

Ein erster (sehr kleiner) Schritt sehr verständlich erklärt.

Datum: 05.12.2008, 12:40 - Autor: Manko10

Hallo und schön, dass es dir gefällt.
Wenn ich mal dazu komme, soll es auch noch weitere Teile geben, die etwas weiterführen, aber die sind derzeit leider noch nicht sin Sicht. :)

Datum: 06.01.2009, 14:32 - Autor: Gast

Das Script ist ja voll cool !

Echt toll .

DANKE

mfg Chris

Datum: 09.03.2010, 11:00 - Autor: enOr

Sehr schöner Einstieg in die GD lib. Damit habe selbst ich es verstanden ;-)

Habe ich was übersehen?

Datum: 06.04.2011, 15:28 - Autor: Thor Duisenberg

Erstmal danke für das Tutorial. Das war ein guter Anfang für mich, weil ich mich damit noch nie beschäftigt habe. So, jetzt zur Sache: Ich meine das Tut aufmerksam gelesen zu haben. Da nirgends erwähnt wird, wie das "test.png" zustande kommt und es auch gar nicht erstellt wird, möchte ich hier eine kleine Ergänzung machen: Schreibt den folgenden Befehl von oben um:

Von: imagepng($img);
Zu: imagepng($img, 'test.png');

So habt ihr dann im Verzeichnis ein File namens: "test.png" und könnt es mit <img src="test.png"/> anzeigen lassen.

Datum: 06.04.2011, 15:54 - Autor: Manko10

Wenn du das Tutorial aufmerksam gelesen hast, wirst du feststellen, dass nicht auf test.png, sondern auf test.php verlinkt wird. In diesem Falle dient die PHP-Datei selbst also als Grafik; deshalb ja auch das anfängliche Setzen des Content-Types. Anstatt Text liefert die PHP-Datei in diesem Falle nämlich binäre Bildinformationen an den Browser. So ist gewährleistet, dass die Grafiken wirklich dynamisch generiert werden können. Sie auf dem Server zwischenzuspeichern könnte bei mehreren parallelen Zugriffen Probleme bereiten und sollte nur bedacht als Caching-Methode eingesetzt werden (jeweils mit eindeutigen Dateinamen).

Datum: 06.04.2011, 15:57 - Autor: Manko10

Ergänzung: verwirrend war vielleicht, dass es hieß, dass die PHP-Datei unter dem Namen gd1.php gespeichert wird. Tatsächlich handelt es sich hierbei um einen kleinen Fehler. Die Datei wird natürlich unter dem Namen abgespeichert, mit dem sie eingebunden wird, hier also test.php.
Ich habe das korrigiert.

Kommentar schreiben: