Tutorials
[ Zurück ]


Wie erstelle ich eine Grafik mit PHP?


PHP kann weit mehr als nur Websites in HTML erstellen.
Man kann PHP auch Bilder erstellen lassen.
Willst du zum Beispiel in deiner Signatur aktuelle Daten deiner Website einbinden (wie du es vielleicht schon hier im Forum oft gesehen hast), dann musst du per PHP ein Bild erstellen.
Hier lernt ihr, wie ihr ein einfaches Bild erstellt, dass "Hallo Welt!" schwarz auf weis in ein Bild schreibt. Ihr könnt das dann natürlich nach belieben um andere Farben und vor allem andere Daten erweitern.

Ihr benötigt dazu zwei Dateien, am besten in einem Ordner: 
1. image.php
2. Den Font in dem Ihr den Text schließlich darstellen wollt (in unserem Beispiel ist das arial.ttf, Fontdateien findet ihr bei Windows im Ordner C:\WINDOWS\Fonts)

Am Anfang sagt ihr dem Browser, dass er jetzt ein Bild geschickt bekommt. (In diesem Falle eine ".png") das geht mit
header('Content-type: image/png');
Nun speichern wir einige Werte in Variablen:
$content = "Hallo Welt!";
$width = 300; //Pixel
$height = 55; //Pixel
Nun geht es an die Bilderstellung. Dazu erzeugen wir mit einer PHP-Standartfunktion (wie sollte es auch anders sein) ein neues Bild mit Höhe und Breite:
$img = imagecreatetruecolor($width,$height);
Jetzt ist $img die Referenz auf unser zukünftiges Bild, die wir für die folgenden Befehle brauchen werden.

Nun definieren wir die Farben, die wir verwenden wollen (also Schwarz und Weis):
$white = ImageColorAllocate($img, 255, 255, 255); //Entspricht Hex #ffffff
$black = ImageColorAllocate($img,   0,   0,   0); //Entspricht Hex #000000
nun wird noch die Hintergrundfarbe gesetzt mit
ImageFill($img, 0, 0, $white); 

Nun noch ein paar Variablen zum Text an sich:
 
$fontSize = 38; //Pixel 
$angle = 0;//Winkel in dem der Text dargestellt werden wird
$font = "./arial.ttf"; //eure Font Datei
$left = 0; //Abstand des Textes von der Linken kannte
$top  = $fontsize + 2; // Abstand der Unterkante des Textes zur Oberkante des Bildes in Pixeln ((0|0) ist im Bild 
                       // oben inks, im Text aber unten links
Damit haben wir nun die letzten Einstellungen zum Text gemacht, hier kommt endlich der Text:
imagettftext ($img, $fontSize, $angle, $left,  $top, $black, $font, $content);
Jetzt ist alles soweit fertig, es muss nurnoch zu Papier, oder besser zu PNG gebracht werden:
imagepng ($img);
Damit ist unser Bild fertig.
Geben wir den Speicherplatz wieder frei mit
imagedestroy($img);
Ihr könnt euer Bild nun einbinden, über ganz normales HTML:
 
<img src='image.php' />

Das alles Funktioniert übrigens auch mit anderen gängien Bildtypen, zum Beispiel ".jpg" und ".gif". Dazu müsst ihr nur die vorletze Zeile anpassen und oben den Header richtig setzen.
Wenn ihr mehr Funktionen braucht (wie imagefilledrectangle...) dann schaut doch auf der PHP.net Dokumentation vorbei unter de.php.net/manual/de/ref.image.php.

Da es sich hier außerdem um ein ganz normales PHP-Script handelt, könnt ihr weiterhin auf Datenbanken, Sessions und $_GET-Variablen zugreifen, sofern ihr solche verwendet!

Ich hoffe ihr konntet diesem Tutorial folgen, und freue mich auf viele neue Dynamische Bilder im Forum!
Abschließend noch der Quelltext, von mir auch auf seine Funktionalität gestestet
(ein Kleiner Tipp zum Debuggen: Wenn ihr den Header am Anfang auskommentiert, sehr ihr alle PHP-Fehlermeldungen, ansonsten erscheint nur "Die Grafik enthält Fehler"!)


 
<?php
header('Content-type: image/png');
$content = "Hallo Welt!";
$width = 300; //Pixel
$height = 55; //Pixel
$img = imagecreatetruecolor($width,$height);

$white = ImageColorAllocate($img, 255, 255, 255); //Entspricht Hex #ffffff
$black = ImageColorAllocate($img,   0,   0,   0); //Entspricht Hex #000000

ImageFill($img, 0, 0, $white); 

$fontSize = 38; //Pixel 
$angle = 0;//Winkel in dem der Text dargestellt werden wird

$font = "./arial.ttf"; //eure Font Datei
$left = 2; //Abstand des Textes von der Linken kannte
$top  = $fontSize + 2; // Abstand der Unterkante des Textes zur Oberkante des Bildes in Pixeln ((0|0) ist im Bild 
                       // oben links, Im text aber unten links
                       
imagettftext ($img, $fontSize, $angle, $left,  $top, $black, $font, $content);
imagepng ($img);
imagedestroy($img);
?>


 

Erstellt:29.09.10 17:54
Autor: ecknecke

Letzte Änderung: 05.05.11 00:17
Geändert von: ecknecke

Bewertungen:2
Bewertung: 4.0

Freigeschaltet: Ja
Views 3268

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 390] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE