Gd Library Deel 3
1. Voorwoord
2. Afbeelding als achtergrond
3. Transparant
4. Meerdere afbeeldingen
5. Watermerk
6. Slotje
1. Voorwoord
Deze tutorial is een vervolg op:
- Gd Library Deel 1
- Gd Library Deel 2
Lees deze 2 tutorials grondig door of fris de functies nog eens op.
Ik ga niets herhalen, enkel nieuwe functies uitleggen, gebruiken en er voorbeelden van tonen.
 Top
2. Afbeelding als achtergond
De functie die hiervoor nodig is, hangt af van de extensie van de achtergrondafbeelding.
Hieronder volgt een tabel van de functies die gebruikt kunnen worden.
| Extentie |
Functienaam |
| PNG |
ImageCreateFromPNG(); |
| GIF |
ImageCreateFromGIF(); |
| JPG / JPEG |
ImageCreateFromJPEG(); |
| BMP |
ImageCreateFromWBMP(); |
Nu ga ik over tot de praktijk:
<?php
header('content-type: image/png');
$img = ImageCreateFromPNG("vb-pic.png");
imagepng($img);
imagedestroy($img);
?>
|
Resultaat:
Bekijk vb-pic.png
Wat we te zien kregen met GD is inderdaat net hetzelfde als de originele afbeelding.
Nou, dat was nu niet zo moeilijk, maar die witte achtergrong misstaat toch wel. Over naar
hetvolgende: tranparante achtergrond!
Top
3. Transparant
De tweede functie die ik ga uitleggen is imagecolortransparent();
Deze functie geeft de mogelijk een bepaaldekleur transparant te maken bij een afbeelding. De functie heeft 2 parameters,
- De image (Waarbij we een transparante achtergrond willen)
- De kleur (die transparant moet worden)
Mijn voorbeeld afbeelding en code:
<?php
header('content-type: image/png');
$img = imagecreatefrompng("vb-pic.png");
$color = ImageColorAllocate($img, 255, 255, 255);
ImageColorTransparent($img, $color);
imagepng($img);
imagedestroy($img);
?>
|
Resultaat:
Wat? Zie je geen verschil? Dan gebruik je IE6! In firefox zul je zien dat het wel netjes transparant is. Als je toch
een transparante achtergrond wilt hebben, die ook in IE6 werkt, zul je het tot een GIF-je moeten maken.
Top
4. Meerdere afbeeldingen
Met het vooruitzicht een watermerk op een afbeelding te zetten, moeten we meerdere afbeelingen hebben. Hiervoor heb
ik nog 2 heel mooie afbeeldingen. Niet?
- Deze
- En deze
Deze gaan we dus mengen met het aapje. Hiervoor hebben we een nieuwe functie nodig namelijk: imagecopymerge();
De functie imagecopymerge() kan 2 afbeelding mengen (=over-elkaar-plaatsen).
Eerst moeten we de afbeeldingen 'inladen'.
<?php
header('content-type: image/png');
$aap = imagecreatefrompng("vb-pic.png");
$girafe = imagecreatefrompng("vb-pic-2.png");
$olifant = imagecreatefrompng("vb-pic-3.png");
?>
|
Dat was stap 1, dit gaf als resultaat niets. Maar we kunnen nu de 3 afbeeldingen wel gaan gebruiken.
Ik ga de afbeelding $aap als grond-afbeeldingen nemen.
Nu kunnen we de girafe ($girafe) over de afbeelding aap ($aap) zetten.
Laten we dit dan even naar code omzetten:
<?php
header('content-type: image/png');
$aap = imagecreatefrompng("vb-pic.png");
$girafe = imagecreatefrompng("vb-pic-2.png");
$olifant = imagecreatefrompng("vb-pic-3.png");
ImageCopyMerge($aap, $girafe, 50, 0, 0, 0, 180, 302, 100);
imagepng($aap);
imagedestroy($aap);
?>
|
Resultaat:
Ik weet het, het ziet er niet uit. Maar ik denk dat de functie toch wel wat verduidelijking kan gebruiken;
| Parameter |
Functie |
$aap |
Afbeelding op de achtergrond |
$girafe |
Afbeelding op de voorgrond |
50 |
Horizontale-Afstand van de afbeelding $girafe tov de linker zijkant |
0 |
Verticale-Afstand van de afbeelding $girafe tov de bovenkant |
0 |
Aantal pixels links laten vallen van de afbeelding $girafe |
0 |
Aantal pixels bovenaan laten vallen van de afbeelding $girafe |
180 |
Breedte van de afbeelding $girafe |
302 |
Hoogte van de afbeelding $girafe |
100 |
Opacity van de afbeelding $girafe, zoals in Photoshop, 100 = onderliggende afbeelding is niet zichtbaar, 0 = de afbeelding $girafe zou niet meer zichtbaar zijn |
Nu is het hopelijk een beetje duidelijk wat de functie doet. Je kan nu even gaan experimenteren met de functie, wat
waarden verandere enz. zodat je werkelijk ziet wat er verandert.
Nu nog even het olifantje erop zetten
<?php
header('content-type: image/png');
$aap = imagecreatefrompng("vb-pic.png");
$girafe = imagecreatefrompng("vb-pic-2.png");
$olifant = imagecreatefrompng("vb-pic-3.png");
imagecopymerge($aap, $girafe, 50, 0, 0, 0, 180, 302, 70);
ImageCopyMerge($aap, $olifant, 0, 25, 0, 100, 164, 200, 50);
imagepng($aap);
imagedestroy($aap);
?>
|
Resultaat:
Het is wel een vrij onnutig voorbeeldje, mja. Ik heb ook de transpirantie van de girafe verandert zodat het duidelijk
is dat de aap er onder zit. Moest er nu geen transpirantie zien (9de parameter = 100) dan zou de olifant op de girafe
liggen met de aap daar nog eens onder. Klikie.
Oefening
Als we nu de stof die we hier hebben gezien op voorbeeld 5 toepassen
dan kunnen we de witte achtergronden van de olifant en girafe weg doen, zodat er nog wat meer overschiet van de aap.
Concreet wil dit zeggen:
- Geeft de girafe een transparante achtergrond
- Geeft de olifant een transparante achtergrond
Als je dit hebt gedaan kun je hier klikken om te
checken of je afbeelding ermee overeen stemt, en hier
vind je de source ervan.
Top
5. Watermerk
Als je nou je site-vermelding wil hebben op de mooie aap, girafe, olifant of een eigen afbeelding kun je dat ook doen
met imagecopymerge(). Maar je hebt
nog 2 functies nodig. Je moet de afmetingen hebben ven de afbeelingen. Ik ga er vanuit dat je een watermerk wil zetten
Rechts onder van de afbeelding.
De breedte bepaal je door de functie imagesx().
En de hoogte door de functie imagesy().
Ik ga mijn aapje watermerken met deze afbeelding.
Dan gaan we nu het in de code gooien
<?php
header('content-type: image/png');
$aap = imagecreatefrompng("vb-pic.png");
$watermerk = imagecreatefrompng("vb-pic-4.png");
imagecopymerge($aap, $watermerk, 0, 0, 0, 0, 200, 16, 100);
imagepng($aap);
imagedestroy($aap);
?>
|
Dan krijgen we hetvolgende:
Ok, het watermerk staat er, maar ik ben nog niet tevreden! Ik wil het in het rechten onderhoekje hebben. Als ik mijn
watermerk daar wil krijgen zal ik eerst de afmetingen moeten hebben van de aap. Dan heb ik ook de breedte en hoogte
nodig van het watermerk, het verschil ervan is het punt waar het watermerk moet komen.
<?php
header('content-type: image/png');
$aap = imagecreatefrompng("vb-pic.png");
$aapBreed = imagesx($aap);
$aapHoog = imagesy($aap);
$watermerk = imagecreatefrompng("vb-pic-4.png");
$watermerkBreed = imagesx($watermerk);
$watermerkHoog = imagesy($watermerk);
imagecopymerge($aap, $watermerk, ($aapBreed - $watermerkBreed), ($aapHoog - $watermerkHoog), 0, 0, 200, 16, 100);
imagepng($aap);
imagedestroy($aap);
?>
|
Met als resultaat:
Dat is nog niet wat ik wil, dat wit moet nog weg, dusja, dan maken we het watermerk transparant.
<?php
header('content-type: image/png');
$aap = imagecreatefrompng("vb-pic.png");
$aapBreed = imagesx($aap);
$aapHoog = imagesy($aap);
$watermerk = imagecreatefrompng("vb-pic-4.png");
$watermerkBreed = imagesx($watermerk);
$watermerkHoog = imagesy($watermerk);
//
$color = ImageColorAllocate($watermerk, 255, 255, 255);
ImageColorTransparent($watermerk, $color);
//
imagecopymerge($aap, $watermerk, ($aapBreed - $watermerkBreed), ($aapHoog - $watermerkHoog), 0, 0, 200, 16, 100);
imagepng($aap);
imagedestroy($aap);
?>
|
Nu heb ik wat ik wil, je kunt misschien het watermerk nog wat transparant maken als je dat wil, maar dat hoeft niet.
Ik weet het mooi watermerkje maar ff snel iets gemaakt. Maar het gaat om het prencipe. Als je, als watermerk, er gewoon
een tekst wil op zetten zoals ik in het voorbeeld deed, raad ik je aan gewoon om het met
ImageString() te doen. Maar als je
er een logo op wil ofzo of misschien sierlijke tekst dan zul je zoiets moeten doen als in het voorbeeld.
Top
6. Slotje
Als je stemt, wil ik ook dat je een reactie achterlaat voor tips voor eventuele volgende tutorials.
Verder hoop ik dat je iets aan deze tut hebt gehad, de diertjes zijn gewoon geript van google.
Plannen voor Deel 4:
- Cirkels
- Verticale teksten
- Image resize'n
- ...
Top
|
