Tags:    php

Indledning

Jeg vil i denne artikel gennemgå PHP-tilføjelsen GD lib, som giver dig mulighed for at oprette eller manipulere billeder. I denne, første artikel, vil vi kigge på koordinatsystemet, nogle få funktioner og komme med et enkelt færdigt script til sidst i artiklen.

Om GD lib

De nyere versioner af GD lib understøtter jpeg, png og xpm, samt læsning af gif. Vi vil ikke komme ind på gif og xpm i denne artikel.

Men hvorfor er der kun understøttet læsning af gif? Jo, eftersom gif formatet ikke er gratis for programmører at understøtte i deres programmer, har man fjernet dette fra versioner af GD lib over 1.6, da GD lib er en gratis tilføjelse til PHP.
Programmørerne bag GD lib slipper altså for at betale licens for at understøtte gif.

Indlæsning af billeder

For at komme i gang med at oprette nye billeder eller manipulere med allerede eksisterende, skal man altid starte med at indlæse billedet i scriptet.

Her giver jeg to eksempler på indlæsning af billeder, vi skal huske at gemme det i en variabel, så vi kan manipulere dem senere.

I første eksempel opretter jeg et nyt billede og indlæser det i en variabel. At der er et @ foran funktionen, betyder at en eventuel fejl, ikke vil blive skrevet ud til browseren.

// Eksempel 1
$im = @imagecreate (400, 400);

Som det kan ses har jeg valgt at bruge variablen $im, det er forkortet for image og der er altså en mening med navnet. Jeg indlæser så dette nye billede, som jeg giver størrelsen 400 x 400 pixel, i denne variabel.

Syntax for imagecreate: resource imagecreate ( int x_size, int y_size)
http://dk2.php.net/imagecreate


Og så til næste eksempel, hvor jeg viser hvordan man indlæser et, henholdsvis, png og jpeg billede.

// Eksempel 2
$im_png = @imagecreatefrompng ("billede.png");
$im_jpg = @imagecreatefromjpeg ("billede.jpg");

Her indlæser vi altså to forskellige billeder i de to variabler $im_png og $im_jpg, så kan vi begynde at manipulere med billederne.

Syntax for imagecreatefrompng: resource imagecreatefrompng ( string filename)
http://dk2.php.net/imagecreatefrompng

Syntax for imagecreatefromjpeg: resource imagecreatefromjpeg ( string filename)
http://dk2.php.net/imagecreatefromjpeg

Baggrundsfarve / allokering af farver

Nu har vi gennemgået indlæsning af billeder, på to forskellige måder, og jeg vil nu fortælle hvordan vi kommer videre med det nye billede, altså det vi lavede med imagecreate ().

Vi vil starte med at allokere nogle farver, som vi skal bruge senere i forløbet. Til dette skal vi bruge funktionen imagecolorallocate (). Farven til denne funktion første gang den kaldes, bliver baggrundsfarve, dette forklares lettest ved at tage et kig på næste eksempel.

// Eksempel 3
// Her sætter vi baggrundsfarven til rød
$background = imagecolorallocate ($im, 255, 0, 0);

// Her sætter vi to farver, sort og hvid
$black = imagecolorallocate ($im, 0, 0, 0);
$white = imagecolorallocate ($im, 255, 255, 255);

Vi kan nu kigge på dette eksempel, og jeg har valgt at allokere baggrundsfarven i variablen $background, og da dette er den første farve som vi allokerer, vil denne automatisk blive sat som baggrund på vores billede, dette er med mindre vi indlæser farven til et billede som er hentet fra et allerede eksisterende, som i eksempel 2.
Derudover har jeg allokeret farverne sort og hvid i henholdsvis $black og $white.

Det første argument vi angiver i funktionen, er variablen til det billede vi vil manipulere, i det her tilfælde $im. De næste tre argumenter er farveværdier i først rød, grøn og så blå, på en skala fra 0-255, som vi kender det fra RGB-skalaen.

Syntax for imagecolorallocate: int imagecolorallocate ( resource image, int red, int green, int blue)
http://dk2.php.net/imagecolorallocate

Koordinatsystemet i GD lib

For at komme længere med vores billede, er vi nødt til at vide noget om hvordan koordinatsystemet i GD lib fungerer, dette har jeg illustreret med nedenstående billede, forklaring følger.




Som du kan se er 2. aksen (bedre kendt som y aksen) vendt på hovedet, og man vil ikke kunne se negative værdier. For at få et mere grafisk eksempel, kan du kigge på nedenstående billede, hvor jeg har tegnet en linie fra punktet (50,50) til (300,200).

Tegning af firkant

Så er vi kommet så langt, og vi har – forhåbentlig – fået banket det mest væsentlige ind i bevidstheden. Så nu skal vi have lavet vores billede lidt sjovere.

Lad os tilføje billedet en firkant. I følgende eksempel, tilføjer jeg en sort firkant som starter i punktet (49, 49) og slutter i (450, 150).

// Eksempel 4
imagerectangle ($im, 49, 49, 450, 150, $black);

Lad os kigge på hvad de forskellige argumenter skal bruges til. I første argument fortæller vi hvilket billede vi vil ligge firkanten på, de næste to argumenter er startpunktet (x1, y1), altså (49, 49), de næste er ligeledes et punkt, dog slutpunkt (x2, y2), i dette tilfælde (450, 150), og til sidst angiver vi hvilken farve denne firkant skal have.

Syntax af imagerectangle: int imagerectangle ( resource image, int x1, int y1, int x2, int y2, int col)
http://dk2.php.net/imagerectangle

Kopiering af billede

Nu synes jeg så at vi skal sætte et billede ind i denne firkant, så vi henter et billede med imagecreatefromjpeg() og kopierer dette ind i firkanten med imagecopy().

Dette bliver et lidt mere forvirrende eksempel, hvor vi kopierer fra billede.jpg, fra (0, 0) til (400, 100), og sætter dette ind i firkanten, på punktet (50, 50).

// Eksempel 5
$im_jpg = imagecreatefromjpeg (”billede.jpg”);
imagecopy ($im, $im_jpg, 50, 50, 0, 0, 400, 100);

Vi kender allerede funktionen imagecreatefromjpeg, så lad os kigge på imagecopy. I imagecopy starter man, som for det meste, med at angive hvor vi vil placere det man vil indsætte. Andet argument er billedet man vil kopiere fra. Tredje og fjerde argument, hvor i destinationsbilledet man vil sætte det kopierede stykke ind, i dette tilfælde (50, 50). Og de næste to argumenter, hvorfra i billedet man vil kopiere. Det syvende argument hvor bredt et stykke man vil kopiere og det sidste argument er hvor højt dette stykke skal være.

Syntax af imagecopy: int imagecopy ( resource dst_im, resource src_im, int dst_x, int dst_y, int src_x, int src_y, int src_w, int src_h)
http://dk2.php.net/imagecopy

Tekst

Nu har hvor vi har lavet en firkant og indsat et billede, hvad med så at tilføje lidt tekst? Det gør vi.

Vi skriver teksten ”Dette er et eksempel” oven på billedet, med hvid skrift.

// Eksempel 6
imagestring ($im, 2, 52, 52, ”Dette er et eksempel”, $white);

Første argument, er destinationsbilledet. Andet argument er hvilken skrifttype vi vil benytte, der er i GD lib, 5 indbyggede bitmap skrifttyper, forskellen på de 5 er størrelsen. Placeringen af teksten er angivet ved de næste to argumenter, i dette tilfælde (52, 52). Femte argument er så selve teksten. Og så i sidste argument fortæller vi hvilken farve teksten skal stå med.

Syntax af imagestring: int imagestring ( resource image, int font, int x, int y, string s, int col)
http://dk2.php.net/imagestring

Afslutning

Nu har vi lavet et nyt billede, vi har lært om koordinatsystemet, indsat en firkant, en del af et billede og et stykke tekst.

Nu mangler vi blot at skrive billedet ud til browseren, og destruere dette. Det gøres som med følgende eksempel.

// Eksempel 7
imagepng ($im);
imagedestroy ($im);

imagepng skriver vores billede ud til browseren som et png billede, hvis du hellere vil have det ud som jpg, bruger du blot imagejpeg.
Og imagedestroy sletter alt hvad vi har lavet, sådan at det ikke bliver gemt hvis man skal bruge $im igen.


Og for at give en god afslutning, vil jeg her komme med hele scriptet, så det er nemmere for dig at afprøve det. Gem scriptet som image.php og hent det med <img src=”image.php” />.

$im = @imagecreate (400, 400);

// Her sætter vi baggrundsfarven til rød
$background = imagecolorallocate ($im, 255, 0, 0);

// Her sætter vi to farver, sort og hvid
$black = imagecolorallocate ($im, 0, 0, 0);
$white = imagecolorallocate ($im, 255, 255, 255);

imagerectangle ($im, 49, 49, 450, 150, $black);

$im_jpg = imagecreatefromjpeg (”billede.jpg”);
imagecopy ($im, $im_jpg, 50, 50, 0, 0, 400, 100);

imagestring ($im, 2, 52, 52, ”Dette er et eksempel”, $white);

imagepng ($im);
imagedestroy ($im);

Og her er det endelige resultat.




Så håber jeg at I har fået noget ud af denne artikel, og at I har lyst til at læse de næste i rækken.

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X