yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Bilder mit PHP erstellen



Hi, in diesem Tutorial erkläre ich, wie man mit PHP dynamische Bilder erstellen kann.

Fangen wir mit einem einfachen Rechteck an (Erklärung im Code mit PHP-Kommentaren):

PHP-Datei:
1
2
3
4
5
6
7
8
9
10
11
<?php
Header
("Content-Type: image/png");
# Hier wird der Header gesendet, der später die Bilder "rendert" ausser png kann auch jpeg dastehen
$width 500# Später die Breite des Rechtecks
$height 200# Später die Höhe des Rechtecks
$img ImageCreate($width$height); # Hier wird das Bild einer Variable zu gewiesen
$black ImageColorAllocate($img000); # Hier wird der Variable $black die Farbe schwarz zugewiesen
# Die drei nullen bestehen aus den RGB-Parametern. 255, 0, 0 wäre z.B. rot. ($img muss am Anfang stehen)
ImageFill($img00$black); # Hier wird mit ImageFill() das Bild gefüllt an den Koordinaten 0 und 0 mit der Variable $black, also Schwarz
ImagePNG($img); # Hier wird das Bild PNG zugewiesen
?>


Ich denke, hierfür brauche ich kein Bild zu zeigen, da es nur eine schwarze Fläche 500x200px ist.



Nun beschriften wir das Rechteck (z.B. für eine dynamische Signatur):
PHP-Datei:
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
28
29
30
31
<?php
Header
("Content-Type: image/png");
# Hier wird der Header gesendet, der später die Bilder "rendert" ausser png kann auch jpeg dastehen

##################################################
$width 100// Später die Breite des Rechtecks
$height 50// Später die Höhe des Rechtecks
$img ImageCreate($width$height); # Hier wird das Bild einer Variable zu gewiesen
##################################################


##################################################
$black ImageColorAllocate($img000); # Hier wird der Variable $black die Farbe schwarz zugewiesen
$white ImageColorAllocate($img255255255); # Hier wird der Variable $white die Farbe weiß zugewiesen
# Die drei nullen bestehen aus den RGB-Parametern. 255, 0, 0 wäre z.B. rot. ($img muss am Anfang stehen)
##################################################


##################################################
ImageFill($img00$black); # Hier wird mit ImageFill() das Bild gefüllt an den Koordinaten 0 und 0 mit der Variable $black, also Schwarz
ImageString($img22620"Der Text"$white);
# Die 2 steht für die GD-Lib interne Schriftart (es gibt insgesamt 5, also probierts aus).
# Die 225 steht für die Position von Links, also 26px von Links entfernt.
# Die 100 steht für die Postion von Oben, also 20px von oben entfernt.
# Der Text, ist der, der später im Bild erscheinen soll.
# $white steht für die Farbe die der Text haben soll.
###################################################

ImagePNG($img); # Hier wird das Bild PNG zugewiesen
ImageDestroy($img# Hier wird der Speicherplatz für andere Sachen geereinigt
?>


Hierfür brauche ich wohl auch kein Bild



So nun kann man das Bild im Bild noch mal mit anderen Farben einfüllen.
Ich hab mal eine Deutschlandfahne gemacht :D
So hier ist der Code dafür:

PHP-Datei:
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
28
29
30
31
<?php
Header
("Content-Type: image/png");
# Hier wird der Header gesendet, der später die Bilder "rendert" ausser png kann auch jpeg dastehen

##################################################
$width 300# Später die Breite des Rechtecks
$height 300# Später die Höhe des Rechtecks
$img ImageCreate($width$height); # Hier wird das Bild einer Variable zu gewiesen
##################################################

##################################################
$black ImageColorAllocate($img000); # Hier wird die Farbe schwarz einer Variable zugewiesen
$red ImageColorAllocate($img25500); # Hier wird die Farbe rot einer Variable zugewiesen
$yellow ImageColorAllocate($img2552550); # Hier wird die Farbe gelb einer Variable zugewiesen
##################################################


##################################################
ImageFill($img00$yellow); # Erst wird das Bild mit gelb gefüllt.
ImageFilledRectangle($img00300100$black); # Mit ImageFillRectangle wird ein weiter Bereich des Bildes mit schwarz gefüllt
# Die 1. 0 ist die Entfernung in px von Links.
# Die 2. 0 ist die Entfernung in px von Oben.
# Die 300 ist die Breite der Farbe.
# Die 100 ist die Höhe der Farbe.
ImageFilledRectangle($img0101300200$red);
# Hier die gleichen Sachen wie bei der Schwarzfüllung, nur mit anderen Koordinaten und anderer Farbe.

##################################################
ImagePNG($img);
ImageDestroy($img# Hier wird der Speicherplatz für andere Sachen geereinigt
?>


So siehts dann aus:
Bild, URL: http://llcooldanny.s3.cybton.com/danny/de.gif



So jetzt kommen wir zu Kreisen, Ellipsen und Linien:

Kreise, Halbkreise, Ellipsen:
PHP-Datei:
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
28
<?php
Header
("Content-Type: image/png");
# Hier wird der Header gesendet, der später die Bilder "rendert" ausser png kann auch jpeg dastehen

##################################################
$width 100// Später die Breite des Rechtecks
$height 100// Später die Höhe des Rechtecks
$img ImageCreate($width$height); # Hier wird das Bild einer Variable zu gewiesen
##################################################

##################################################
$red ImageColorAllocate($img25500); # Hier wird der Variable $red die Farbe rot zugewiesen
$white ImageColorAllocate($img255255255); # Hier wird der Variable $white die Farbe weiß zugewiesen
##################################################
ImageFill($img00$white); # Erst wird das Bild mit weiß gefüllt.

ImageArc($img505090201180$red); # Jetzt wird ein Kreis gezogen
# Der erste Parameter 50 steht für die Entfernung in px von rechts
# Der zweite Parameter 50 steht für die Entfernung in px von oben
# Der dritte Parameter 90 steht für die Größe des Kreises (oder der Ellipse) in der Breite
# Der vierte Parameter 20 steht für die Größe des Kreises (oder der Ellipse) in der Höhe
# Der fünfte Parameter 1 steht für den Startwinkel
# Der sechste Parameter 180 steht für den Endwinkel des Kreises (bzw. der Ellipse)
######################################################

ImagePNG($img); # Hier wird das Bild PNG zugewiesen
ImageDestroy($img# Hier wird der Speicherplatz für andere Sachen geereinigt
?>





Linien, Gestrichtelte Linien:

PHP-Datei:
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
28
29
30
31
32
33
34
<?php
Header
("Content-Type: image/png");
# Hier wird der Header gesendet, der später die Bilder "rendert" ausser png kann auch jpeg dastehen

##################################################
$width 250# Später die Breite des Rechtecks
$height 250# Später die Höhe des Rechtecks
$img ImageCreate($width$height); # Hier wird das Bild einer Variable zu gewiesen
##################################################

##################################################
$white ImageColorAllocate($img255255255); # Hier wird die Farbe weiß einer Variable zugewiesen
$black ImageColorAllocate($img000); # Hier wird die Farbe schwarz einer Variable zugewiesen
##################################################

ImageFill ($img00$white); # Das Bild wird mit weiß gefüllt.

ImageLine($img1125250125$black); # Mit ImageLine wir eine Linie gezeichnet
#
# Die 1 steht für den Abstand in px von links
# Die 1. 125 steht für den Abstand in px von Oben vom linken Punkt der Strecke
# Die 250 steht für den Abstand in px von rechts
# Die 2. 125 steht für den Abstand in px von Oben vom rechten Punkt der Strecke
#
# !!! WICHTIG: Für geschtrichelte Lininen einfach den Befehl 'ImageDashedLine()' benutzen
# Die Parameter sind gleich wie bei 'ImageLine' !!!
#
#
##################################################

##################################################
ImagePNG($img); # Hier wird das Bild PNG zugewiesen
ImageDestroy($img# Hier wird der Speicherplatz für andere Sachen geereinigt
?>




Jetzt kommen wir zu einem sehr interessanten Teil vom Tutorial:

Mit existierenden Bildern z.B. eine dynamische Signatur bilden:

PHP-Datei:
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
Header
("Content-Type: image/png");
# Hier wird der Header gesendet, der später die Bilder "rendert" ausser png kann auch jpeg dastehen

##################################################
$width 100// Später die Breite des Rechtecks
$height 100// Später die Höhe des Rechtecks
$img ImageCreateFromJPEG('g.jpg'); # Hier wird das Bild einer von einem Vorhandenen Bild benutzt (hier: g.jpg)
#
# Seit Version 1.6 der GD-Library ist .gif abgeschaltet also:
#
#---------------------------------------------------
# Zuhause von der GD-Lib: <a href="http://www.boutell.com/gd/" title="http://www.boutell.com/gd/ ansurfen" target="_blank">http://www.boutell.com/gd/</a>
#---------------------------------------------------
#
# Wenn ihr die GD-Library 2.0 habt immer .jpg oder .png aber kein .gif benutzen!

# So kann man GD-Library einstellen:

# 1. Öffnet im Windows-Ordner die php.ini z.B. C:\Windows\php.ini
#
# 2. Jetzt sucht (STR+F) nach ';Windows Extensions' (ohne den Hochkommata)
#
# 3. Dann schreibt 'extension=php_gd2.dll' unter 'extension=php_gd.dll'
#
# 4. Jetzt macht ein ; vor 'extension=php_gd.dll'. Also aus 'extension=php_gd.dll' mach ';extension=php_gd.dll'
#
# 5. Oder wenn ihr GD-Lib 1.X wollt, dann macht es umgekehrt
##################################################

$black ImageColorAllocate($img000); # Farbe schwarz mit $black festlegen

$font_height ImageFontHeight(3); # Hier wird die Schrifthöhe mit 3 belegt (hier könnt ihr mit den Werten rumprobieren)

$font_width ImageFontWidth(3); # Hier wird die Schriftbreite mit 3 belegt (hier könnt ihr mit den Werten rumprobieren)

$image_height ImageSY($img); # Hier wird in einer Variable die Höhe des Bildes (hier g.jpg) gespeichert

$image_width ImageSX($img); # Hier wird in einer Variable die Breite des Bildes (hier g.jpg) gespeichert

$text 'Mein Name ist LLCoolDannY!'# Hier ist der Text, der später im Bild stehen soll

$length $font_width*strlen($text); # Hier wird die Schriftbreite an das Bild angepasst

# Hier kriegt man durch Teilungen die Mitte des Bildes heraus #

$image_center_x = ($image_width/2)-($length/2);
$image_center_y = ($image_height/2)-($font_height/2);

###############################################################

ImageString($img3$image_center_x$image_center_y$text$black);
/**
* Die 3 nach der Variable $img steht für die GD-Lib interne Schriftart diese geht von 1-5 (also ausprobieren)

###############################################################
* Mit $image_center_x und $image_center_y wurde die Mitte herausgefunden und nun angewandt. (Dort können auch eigene Zahlen stehen)
* Beispiel:

* ImageString($img, 3, 200, 150, 'Das ist ein Testtext', $black);
*
* Hier ist der String (Zeichenkette, also der Text) 200px von oben und 150px von links vom Bildrand entfernt
*
###############################################################
*
*/

ImagePNG($img); # Hier wird das Bild PNG zugewiesen
ImageDestroy($img# Hier wird der Speicherplatz für andere Sachen geereinigt
?>


Das Ergebniss könnte dann so aussehen:
Vorher:
Bild, URL: http://llcooldanny.s3.cybton.com/danny/g.jpg

Nachher:
Bild, URL: http://llcooldanny.s3.cybton.com/danny/g_end.png




So ich denke, alle hauptsächlichen Funktionen sind drin.

MfG, LLCoolDannY

Zusatz:
Hier sind alle (mir Bekannten) Verweise zu Image*()-Funktionen:

imagearc
imagechar
imagecharup
imagecolorallocate
imagecolorat
imagecolorclosest
imagecolorexact
imagecolorresolve
imagecolorset
imagecolorsforindex
imagecolorstotal
imagecolortransparent
imagecopyresized
imagecreate
imagecreatefromgif
imagedashedline
imagedestroy
imagefill
imagefilledpolygon
imagefilledrectangle
imagefilltoborder
imagefontheight
imagefontwidth
imagegif
imageinterlace
imageline
imageloadfont
imagepolygon
imagepsbbox
imagepsencodefont
imagepsfreefont
imagepsloadfont
imagepstext
imagerectangle
imagesetpixel
imagestring
imagestringup
imagesx
imagesy
imagettfbbox
imagettftext



Geschrieben von LLCoolDannY am 18.06.2004 (29643x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Ein sehr schönes tutorial. damit kann man ne ganze menge mit Bildern machen
Geschrieben von example
Sehr ausführlich und auch sehr umfangreich.



Das ist sogar so gut, dass selbst ich das versteh (das auf php.net versteh ich nicht *gg*)

Geschrieben von Phil Marx
Das ist schön, dass es dir gefällt :)
Geschrieben von LLCoolDannY
ist für mich als GDLib Freak zwar nix neues, hätte mir aber damals den Einstieg in's Proggen mit der GD erleichtert!

Super Tut - respekt!
Geschrieben von michi
Danke, dass es auch den GD-Lib-Freaks gefällt (ich bin ja auch einer ;))



MfG, LLCoolDannY
Geschrieben von LLCoolDannY
Sehr schade, daß man die Beispiele nicht sehen kann, liegen offensichtlich nicht (mehr) auf dem referenzierten Server :-(
Geschrieben von Uwe
Das Tutorial ist einfach super!!!

Das such ich schon seit 2,5 Jahren und da ist es endlich :D

Vielen, vielen Dank!
Geschrieben von Megadomi
Die Beispiel kann man wieder sehen ;)



@Megadomi: Danke für deine positive Kritik =)



mfG
Geschrieben von LLCoolDannY
Danke fürs Onlinestellen!
Geschrieben von Phil Marx
Hallo,

im letzten Beispiel wird ja gezeigt, wie man einen Text in ein Bild hinzufügt, aber wie kann man ein Bild in ein Bild hinzufügen?
Geschrieben von Phili
Mir ist grade ein kleiner Fehler in den Kommenateren aufgefallen. Im 2. Code-Schnippsel steht dies im Kommentar:

# Die 225 steht für die Position von Links, also 26px von Links entfernt.
# Die 100 steht für die Postion von Oben, also 20px von oben entfernt.

Im zweiten Teil des Satzes stimmt es, im ersten jedoch nicht :)

Ansonsten vielen Dank für diese Doku, damit kann man recht einfach die Funktionalität verstehen..

MFG
ProXy
Geschrieben von ProXy
Schade das die Beispiele nich mehr da sind...
Trotzdem Danke, sehr gutes Tutorial sogar für Einsteiger :)
Geschrieben von IceCube